Question

我正在尝试使用ng-model通过文本框获取用户输入，并附加到http.get调用的基本URL，如下所示;

的index.html：

<html ng-app='vidRoute'>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Search Video</title>
        <link rel="stylesheet" href="app/css/custom/main.css">
        <link rel="stylesheet" href="app/css/custom/responsive.css">
    </head>

    <body>
        <div id='mainwrapper'>
            <div id='header' ng-controller="searchController">
                <input type="text" id="searchTxt" ng-model="append">
                <a href="#/search" id="searchBtn">Search Video</a>
            </div>

            <div id="poster">
                <div ng-view></div>
            </div>
        </div>       

        <script type="text/javascript" src="app/javascript/vendor/jquery-2.1.1.js"></script>
        <script type="text/javascript" src="app/javascript/vendor/angular.js"></script>
        <script type="text/javascript" src="app/javascript/vendor/angular-route.js"></script>
        <script type="text/javascript" src="app/javascript/vendor/angular-resource.js"></script>
        <script type="text/javascript" src="app/javascript/vendor/angular-mocks.js"></script>
        <script type="text/javascript" src="app/javascript/custom/searchcontroller.js"></script>
        <script type="text/javascript" src="app/javascript/custom/vidRoute.js"></script>
    </body>
</html>

searchcontroller.js

'use strict';

var vidcontrol = angular.module("vidcontrol", []);

vidcontrol.controller("vidcontroller", ['$scope', '$http', function($scope, $http) {
    $http.get('http://api.themoviedb.org/3/tv/airing_today?api_key=d5e87524383e2872a9555990b268dc5b').success(function(response) {
        $scope.results = response.results;
    });
}]);

vidcontrol.controller('searchController', ['$scope', '$http',
    function ($scope, $http) {
        var url = "http://api.themoviedb.org/3/search/movie?api_key=d5e87524383e2872a9555990b268dc5b&query=";
        // var searchTxt = $('#searchTxt').val();// this works fine when used
        var searchUrl = url + append; //$scope.append also logs 'undefined' on the console
        $http.get(searchUrl).success(function (response) {
            $scope.searchResults = response.results;    
        });
    }]);

但我没有得到任何回复。当我在控制台上记录searchUrl时，我可以看到附加没有根据文本框中的值更新。我对Angular很新，我无法弄清楚我做错了什么。我该怎么做才能解决这个问题？

Answer 1

现在，我看到了这个问题。加载控制器时，它执行控制器代码。这意味着REST查询在构建视图之前运行。这就是你看到未定义问题的原因。解决方案是在控制器中定义一个方法，当您单击＆＃34;搜索视频＆＃34;时将调用该方法。

更新视图

 <a href="#/search" id="searchBtn" ng-click="search()">Search Video</a> //Look at ng-click

更新控制器：

vidcontrol.controller('searchController', ['$scope', '$http',function($scope, $http) {
            var url = "http://api.themoviedb.org/3/search/movie?api_key=d5e87524383e2872a9555990b268dc5b&query=";
            $scope.search = function(){ // Look at here, Defined a method to invoke on "Search Video" link click
                var searchUrl = url + $scope.append; 
                $http.get(searchUrl).success(function(response) {
                    $scope.searchResults = response.results;
                });
            };
        } ]);

如何使用'ng-model'AngularJS更新控制器变量？

1 个答案: