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函数可以正常工作 - 它将数据从SearchService记录到控制台。我之后立即记录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语法寻址。

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

1 个答案: