将工厂中的数据从一个控制器传递/更新到另一个控制器

Question

我不确定是否遇到“最佳实践”问题，试图以一种怪异而奇妙的方式解决该挑战，或者我是否还没有掌握AngularJS。

场景 ：因此，我一直在尝试一种方法，使页面上多次输出“
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，但对数据的其他引用目前没有更新。

Answer 1

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

{{originCity.cityName}}