Question

我是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'。

请有人为我揭开这一点，谢谢！

Answer 1

我也是角色的新人，看着你的问题，我并不完全清楚你实际上在寻找什么，但我已经理解并想出了这个。可能有帮助。

  <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>

Answer 2

我最终决定通过我的网址传递我的数据，然后在我的控制器中使用$ 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]

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

2 个答案: