如何根据服务变化更新指令？

Question

我有一个包含滑块 (mySlider) 的指令 (parent-directive)，在 stop 事件中，使用 2 个参数调用 angular $resource 服务服务 return 一个对象。指令结构：

<parent-directive>
<div ui-slider="slider.options" ng-model="mySlider" id="my-slider">
<span child-directive-one></span>
<span child-directive-two></span>
<span child-directive-three></span>
<div>
    <span child-directive-four></child-directive-four>
</div>
</parent-directive

每当用户拖动滑块时，将使用不同的参数调用服务并获取新结果，基于它我需要更新子指令。

我想到了三种方式：

对所有子元素使用 ng-model 而不是指令，将它们绑定到 parent-directive 中的控制器范围；
第二个，我不知道该怎么做，是在 parent-directive 中创建一个控制器，从服务发送和接收数据并将其共享到 child-directives以便更新它们。
最后一个是在服务中创建一个状态变量，并使用类似于点 1 的控制器更新它。（见上文）并使用 $watch 来监督变量状态，当它发生变化时更新child-directives.

我应该如何进行？

请查看此处以查看简短代码： http://jsfiddle.net/v5xL0dg9/2/

谢谢！

Answer 1

ngModel 用于双向绑定，即允许用户干预值的控件。从描述来看，它们似乎是 display-only 个组件。所以我建议不要使用 ngModel.
通常 child 指令需要它们的 parent。这允许他们调用 parent 控制器上的方法。您需要的恰恰相反：parent 控制器需要调用 children 上的方法。可以这样做：children调用一个registerChild()方法，parent在需要调用的时候遍历所有注册的children。我觉得这个实现很麻烦。
服务是globals/singletons。我会投票反对将服务实施与 UI 需求联系起来。

我的建议看起来像您对选项 3 的实施，但是 parent 控制器保存数据：

1) 将要与child 指令共享的数据放在parent 控制器的成员变量中：

myApp.directive('parentDirective', ['myService', function(myService){
    ...
    controller: function($scope) {
        ...
        this.sharedThing = ...;
    }
}]);

sharedThing 可以在服务 returns 新数据时更新，或者任何其他必要的时间。

2) 让 children 需要 parent（就像你的选项 2），并且 watch 这个属性:

myApp.directive('childDirectiveOne', function() {
    return {
        ...
        require: 'parentDirective',
        link: function(scope, elem, attrs, parentDirective) {
            scope.$watch(
                function() {
                    return parentDirective.sharedThing;
                },
                function(newval) {
                    // do something with the new value; most probably
                    // you want to place it in the scope
                }
            });
        }
    };
});

根据数据的性质，可能需要深入观察。

如何根据服务变化更新指令？

How to update directives based on service changes?

javascript

angularjs

angular-services

angular-directive