Question

我试图实现这个简单的Plunker但没有成功我有一个简单的服务（工厂）：

(function () {
'use strict';

angular
    .module('app.core')
    .factory('PropertiesService', PropertiesService);

function PropertiesService() {
    var sefl = this;
    self.name = 'Properties Service'
    self.properties = {};
    self.setProperties = function (prop)
    {
        self.properties = prop;
    }

    return self;
}
})();

我从指令：

调用此服务

var prop = { 'top': top, 'left': left, 'position': position };
service.setProperties(prop);

正在更新的控制器是：

(function () {
'use strict';

angular
    .module('app.properties')
    .controller('Properties', Properties);

Properties.$inject = ['PropertiesService'];

function Properties(PropertiesService) {
    var vm = this;
    vm.collection = {};
    setCollection();

    function setCollection() {
        for (var key in PropertiesService.properties) {
            if (PropertiesService.properties.hasOwnProperty(key)) {
                vm.collection[key] = PropertiesService.properties[key];
            }
        }
    };
}
})();

最后，我在html中显示数据：

<div ng-controller="Properties as vm">
<ul class="list-group">
    <li class="list-group-item" ng-repeat="(key, value)  in vm.collection">
        <span>{{key}}</span> : <span>{{value}}</span>
    </li>
</ul>
</div>

我理解为什么我只在初始化时获得结果，但我无法找到解决方法，在服务更改时更新控制器（它确实）。感谢

Answer 1

只是要注意一些事情。

在您的plunker中，您使用service，并使用factory尝试相同的代码。这不行。两个提供商之间存在一些差异。

您使用factory：

function PropertiesFactory() {
    // facory doens't get invoked with the new keyword
    // so there is no this
    var self = {};
    self.name = 'Properties Factory'
    self.properties = {};
    self.setProperties = function (prop)
    {
        self.properties = prop;
    }

    return self;
}

或service：

function PropertiesService() {
    var sefl = this;
    self.name = 'Properties Service'
    self.properties = {};
    self.setProperties = function (prop)
    {
        self.properties = prop;
    }
    // there is no need for return
    // since th service gets invoked with the new keyword 

}

形成关于providers的angularjs文档：

服务配方生成与Value或Factory类似的服务食谱，但它通过使用new调用构造函数来实现运营商。构造函数可以使用零个或多个参数表示此类型实例所需的依赖项。

Answer 2

事实证明，我隐藏了代码的一个重要部分，不是故意的，而是缺乏理解。
我的指令正在侦听 DOM事件，并对其更改的数据采取行动。
阅读此article后（以及我的首席技术官的帮助......）我明白我需要手动调用 $ scope。$ apply（）。
现在我有一个元素，我可以调整大小，拖动等，并在屏幕上显示其更改的属性。

现在绑定再次起作用我可以将控制器代码恢复为如下所示：

function Properties(PropertiesService) {
    var vm = this;
    vm.collection = PropertiesService.data;
}

一切都是同步的。
对不起部分数据，感谢您的帮助。
吉拉德

AngularJs - 服务不更新控制器

2 个答案: