如何使用“ng-model”AngularJS 更新控制器变量？答案

【问题标题】：How to update controller variable with 'ng-model' AngularJS?如何使用“ng-model”AngularJS 更新控制器变量？
【发布时间】：2014-12-21 18:19:59
【问题描述】：

我正在尝试使用 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 时，我可以看到 append 没有根据文本框中的值进行更新。我对 Angular 很陌生，我不知道我做错了什么。我应该怎么做才能解决这个问题？

【问题讨论】：

append 没有在这段代码的任何地方定义...我很确定你需要用你在这里写的方式从$scope 中读出它。
当我使用 $scope.append 时，它给出了 'undefined'。

标签： angularjs angular-ngmodel

【解决方案1】：

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

更新视图

 <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;
                });
            };
        } ]);

【讨论】：

当我使用 var searchUrl = url + $scope.append;，我有 searchUrl = api.themoviedb.org/3/search/…。这意味着 $scope.append 未定义
我刚刚意识到您发布了“vidcontrol”模块代码并且您正在使用“vidRoute”模块（）。您能否发布“vidRoute”模块及其控制器“searchController”控制器。
vidRoute 是处理我的路由的模块
vidRoute 是处理我的路由的模块我已经上传了here on fiddle
为什么要使用分离模块来路由和控制器？有什么特殊原因吗？