我不确定是否遇到“最佳实践”问题,试图以一种怪异而奇妙的方式解决该挑战,或者我是否还没有掌握AngularJS。
场景 :因此,我一直在尝试一种方法,使页面上多次输出“ originCity.cityName”,所有这些都引用同一工厂内的同一对象,希望将其设置为其他值(例如“测试字符串”),那么它将追溯替换{{originCity.cityName}}我在页面周围拥有的所有内容。
{{originCity.cityName}}
module.service('cityFactory', function () { return { originCity: { cityName: 'TestLocation' }; //Update the city this.update = function (newCityName) { this.originCity.cityName = newCityName; } });
在两个单独的控制器中,我对工厂进行了以下致电:
$scope.originCity = cityService.originCity
并且,为了演示,在一个单独的控制器中,我对工厂的update方法进行了以下调用:
$scope.setCity = function() { cityService.update('Test String'); }
正如我上面提到的,这对我来说是一个非常新的东西,因此我可能会犯错,但是我希望有一个工厂,可以在页面上的任何地方调用该方法(只要依赖项全部在行)以在几个地方更新该值。
如果我console.log将this.originCity.cityName在工厂内的更新方法,然后将它正确地输出为Test String,但对数据的其他引用目前没有更新。
console.log
this.originCity.cityName
Test String
module.factory('cityFactory', function () { var _cityName = null; var cityFactoryInstance = {}; //Update the city from outside the DOM: var _update = function (newCityName) { _cityName = newCityName; } cityFactoryInstance.update = _update; cityFactoryInstance.cityName = _cityName; return cityFactoryInstance; }); module.controller('controller1', ['$scope','cityFactory', function ($scope, cityFactory) { $scope.originCity.cityName = cityFactory.cityName; }]); module.controller('controller2', ['$scope', 'cityFactory', function ($scope, cityFactory) { $scope.originCity.cityName = cityFactory.cityName; }]);
在DOM中: