绑定服务'getter'或$ watch更改并手动更新 - AngularJS

时间:2014-10-05 22:39:07

标签: javascript angularjs angularjs-directive angularjs-service

在我的AngularJS应用程序中,我使用服务来存储通过简单轮询机制​​更新的信息。然后,我的控制器/指令正在从该服务读取,这样我就可以在一个地方拥有该模型数据,从而避免了其他范围内的一些可能重复的信息。

在开发此解决方案时,我想知道这是否是最好的方法。

目前,每个控制器的范围仅包含他们正在跟踪的对象的键。然后我绑定了'getter'对范围的服务方法,以便它们保持绑定 - 当服务获得更新时,对象集合被替换,因此我不能绑定对象本身,否则我将松开绑定。指令也是如此,我将服务作为依赖项注入,并使用检索到的数据显示一些信息:

// SERVICE
app.factory('updateService', function($interval) {
    var data = {
        '1': {
            'id': 1,
            'info': true,
             ...
        },
        '2': {
            'id',2,
            'info': false,
            ...
        }
    };

    return {
        getDataObj: function(id) {
            return data[id];
        },
        isObjectInfoTrue: function(id) {
            return data[id] && data[id]['info'] === true;
        },
        getObjStatus: function(id) {
            return data[id] && foo();
        }
});

// CONTROLLER
app.controller('MainCtrl', ['$scope', 'updateService', function ($scope, updateService) {
    $scope.getDataObj = updateService.getDataObj;   

    // Id's to follow
    $scope.keys = [1,3];

  }]);

// DIRECTIVE
app.directive('renderData', ['updateService', function(updateService) {
return {
    restrict: 'AE',
    replace: true,
    scope: {
        obj: '=obj'
    },
    link : function(scope,element,attrs) {
        scope.getDataObj = updateService.getDataObj;
        scope.isObjectInfoTrue = updateService.isObjectInfoTrue;
        scope.getObjStatus = updateService.getObjStatus;

    },
    template: '<div ng-if="obj && isObjectInfoTrue(obj.id)" ng-class="getObjStatus(obj.id)" class="obj" style="border:1px solid red">{{}}</div>'
  };
}]);


// HTML
<li ng-repeat="key in keys">        
    <render-data obj="getDataObj(key)"/>
</li>

我喜欢这个选项,但我担心在服务对象的大小增加很多时,咨询服务对象及其行为的重复函数调用次数。与其他选项相比,它是否可扩展?我想这将在控制器上单独使用每个示波器,使用$ watch监听服务数据的更改,然后单独更新每个控制器范围。

提前致谢

0 个答案:

没有答案