AngularJS：尽管绑定到服务变量，控制器变量仍未更新

Question

问题：控制器变量vm.boatList（意图绑定到服务变量，SearchService.boatList）未使用服务变量进行更新。

代码片段：完整代码在底部。

控制器

function SearchController($stateParams, SearchService) { 
     var vm = this; 

     vm.boatList = SearchService.boatList; 

服务

function SearchService(BoatsDataService) { 

     var service = { 
      boatList: null, 
      getBoatList: getBoatList, 
      params: {} 
     }; 

     return service; 

附加数据：

的getBoatList功能来自控制器称为工程 - 它从记录数据到控制台。当我之后立即登录vm.boatList时，它为空。

另外，<div ng-repeat="boat in SearchController.boatList">...</div>只适用于当我直接指定给vm.boatList。

控制台输出：

Array[3] 
null 

完成控制器：

(function() { 
    'use strict'; 

    angular. 
     module('trips'). 
     controller('SearchController', SearchController); 

    SearchController.$inject = ['$stateParams', 'SearchService']; 

    function SearchController($stateParams, SearchService) { 
     var vm = this; 

     vm.boatList = SearchService.boatList; 
     vm.initialParams = getParams(); 

     activate(); 

     //////////////////// 

     function activate() { 
      setInitialParams(); 
      SearchService.getBoatList() 
       .then(function (data) { 
        SearchService.boatList = data; 
        console.log(SearchService.boatList); // Logs data. 
        console.log(vm.boatList); // Logs null. 
       }) 
       .catch(function (error) { 
        console.log(error); 
       }); 
     } 

     function getParams() { 
      var params = { 
       location: $stateParams.location, 
       passengers: $stateParams.passengers, 
       maxPrice: $stateParams.maxPrice, 
       minPrice: $stateParams.minPrice, 
       embark: $stateParams.embark, 
       disembark: $stateParams.disembark, 
       category: $stateParams.category 
      }; 
      return params; 
     } 

     function setInitialParams() { 
      SearchService.params = getParams(); 
     } 
    } 
})(); 

完整的服务：

(function() { 
    'use strict'; 

    angular. 
     module('trips'). 
     factory('SearchService', SearchService); 

    SearchService.$inject = ['BoatsDataService']; 

    function SearchService(BoatsDataService) { 

     var service = { 
      boatList: null, 
      getBoatList: getBoatList, 
      params: {} 
     }; 

     //$scope.$watch('service.params', function() { 
     //  getBoatList().then(function (data { 
     //   service.boatList = data; 
     //  }) 
     // }, true 
     //); 

     return service; 

     ////////////////////// 

     function getBoatList() { 
      return BoatsDataService.BoatList 
       .query(service.params) 
       .$promise 
     } 
    } 
})(); 

回顾：我猜不知如何双向绑定。

Answer 1

当您尝试绑定直接位于服务上的变量时，该变量将失败（请参阅call by sharing）。但是，如果您用对象包装它，它会像您期望的那样工作，请参阅this Fiddle。

所以你的情况，如果你绑定服务到控制器内的对象，它应该是罚款 -

服务：

var service = { 
     boatListObj : { 
      boatList: null 
     }, 
     getBoatList: getBoatList, 
     params: {} 
}; 

控制器：

vm.boatListObj = SearchService.boatListObj; 

无极响应：

.then(function (data) { 
     SearchService.boatListObj.boatList = data; 
     console.log(SearchService.boatListObj.boatList); // Logs data. 
     console.log(vm.boatListObj.boatList); // Should log fine now 
}) 

<div ng-repeat="boat in SearchController.boatList">...</div>不能正常工作的原因是因为SearchController.boatList不在$scope上。它必须位于$ scope上，或者当它放置在控制器上时通过ControllerAs语法进行寻址。