为什么绑定不适用于控制器中的 $scope？答案

【问题标题】：Why is the binding not working for $scope in controller?为什么绑定不适用于控制器中的 $scope？
【发布时间】：2014-09-18 00:53:56
【问题描述】：

我是 Angular 的新手。我在控制器和 html 之间来回处理变量时遇到问题。

在我的控制器中，我不仅想读取 $scope，而且还想在我的服务中的一个函数中使用它。

这是我的工厂：

angular.module('myApp.services', [])
 .factory('hotels', function($http){
    return{
        search: function(city, callback){
            $http({
                method: 'GET',
                url: 'http://myhotels.com/hotels/?city='+city+
                cache: true
            }).success(callback);
        }
    };
 })

控制器：

angular.module('myApp.controllers', [])
   .controller('SearchHotelsController', ['$scope', 'hotels', function($scope, hotels){
      $scope.hotelCity = "";
      hotels.search($scope.hotelCity, function(hotelResults){
         $scope.hotelResults = hotelResults;
    });
}])

在 html 中我没有调用该函数的按钮。当我获得范围变量（hotelResults）时应该调用它：

<input class="form-control" type="text" ng-model="hotelCity">
<a ng-href="#/searchResults"><button>Search</button></a>

当它路由到使用相同控制器的那个页面时，我得到：

{{hotelResults.name}}

================================================ =================

我也尝试在控制器中声明$scope.hotels = {hotelCity: "sf"};，然后将其放入html：<input type="text" ng-model="hotels.hotelCity">并在我的控制器中调用函数中的$scope.hotels.hotelCity，但它们仍然没有连接！无论用户输入什么，我的hotelCity 都会得到“sf”。

请有人帮我解释一下，谢谢！

【问题讨论】：

你有小提琴吗？
不，我的代码很大；不同的功能和依赖关系，我现在无法重建它！对不起！
不用抱歉，只是没有足够的信息来猜测答案。无论如何，祝你好运。
任何控制台错误？你能把控制器的初始化代码和工厂方法放上去吗……我想这就足够了
可能是你有嵌套范围问题。使用对象属性而不是hotelCity。例如 obj.hotelCity

标签： javascript angularjs angularjs-scope angular-ngmodel

【解决方案1】：

我也是 Angular 的新手，看着你的问题，我并不完全知道你真正在寻找什么，但我已经理解并想出了这个。可能会有所帮助。

  <html ng-app="myApp">
  <head><title>Test</title>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.min.js"></script>
  </head>
  <body>
  <div class="test-wrap" ng-controller="myHotels">
  <input type="text" name="h" ng-model="hotelcity" />
  <button ng-    click="search()">Search</button>
  <p>List of Hotel's</p>
  <ul>
    <li ng-repeat="h in hotel | filter:hotelcity">{{h.name}}</li>   
  </ul>
  </div>    
  </body>   
  </html>
  <script type="text/javascript">
   var myApp = angular.module('myApp',[]);
   myApp.controller('myHotels', ['$scope', function($scope) {
    $scope.hotel = [{"name":"Test1 hotel"},{"name":"Test2 hotel"},{"name":"Test3 hotel"}];
    $scope.search = function(){
    console.log($scope.hotelcity);
   }
  }]);
 </script>

【讨论】：

【解决方案2】：

我最终决定通过我的 url 传递我的数据，然后在我的控制器中使用 $routeParams 获取它。我没有弄清楚我的代码的问题，并且我有点期望 Angular 在来回传递变量方面会如此流畅，但我猜这种特殊情况是具有不同范围和函数参数的 javascript 问题。我还了解了 javascript 的 Closure 概念，这对我也没有帮助！

解决方法：我在页面底部的标签内放了一个按钮；

<a ng-href="#/searchResults/{{hotelCity}}"><button>Search</button></a>

然后在我的 app.js 文件中的 routeProvide 中：

$routeProvider.when('/searchResults/:city', {templateUrl: 'partials/second.html', controller: 'secondController'});

然后在控制器中：

hotels.search($routeParams.city, function(hotelResults){
         $scope.hotelResults = hotelResults;
});

[确保在 $scope 旁边的控制器中声明 $routeParams]

【讨论】：