Javascript AngularJS:控制器变量未更新，尽管已绑定到服务变量

问题：控制器变量

vm.boatList

（用于绑定到服务变量，

SearchService.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
        }
    }
})();

从控制器调用的

getBoatList

函数起作用-它将数据从

SearchService

记录到控制台。当我随后立即登录vm.boatList时，它是空的

另外，

…

仅在我直接分配给

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

完整控制器：

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

全套服务：

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

---

重述：我想我不知道如何进行双向绑定。

当您试图绑定直接位于服务上的变量时，它将失败（请参阅）。但是，如果使用对象包装它，它将按照预期工作，请参见

因此，在您的情况下，如果您将服务中的对象绑定到控制器，那么应该可以-

服务：

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

---

..

不起作用的原因是

SearchController.boatList

不在

$scope

上。它必须位于$scope上，或者在控制器上时通过ControllerAs语法进行寻址。

这很有效，谢谢！我的后续问题是：

boatList={}

为什么不工作，因为这会创建一个空对象？事实上，当我使用该语法时，它会作为对象登录到控制台。根据一些阅读资料，我的理解是，只要绑定变量不是原语，它就会设置自动$watch。它不起作用，因为在执行

boatList=…

之后，您试图覆盖它，这意味着您试图更改

boatList

的引用。请注意，在解决方案中，您正在修改对象内部的变量，而不是将包装器对象更改为指向其他对象。