如何根据服务更改更新指令？

Question

我有一个包含滑块（mySlider）的指令（parent-directive），在stop 事件中，调用带有2 个参数的角度$resource 服务，并且该服务返回一个对象。 指令结构：

<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

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

我想到了三种方法：

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

我应该如何进行？

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

谢谢！

Answer 1

1. ngModel 用于双向绑定，即允许用户干预值的控件。从描述来看，它们似乎是仅显示组件。所以我建议不要使用ngModel。

2. 通常子指令需要其父指令。这允许他们调用父控制器上的方法。您需要的恰恰相反：父控制器需要调用子控制器的方法。可以做到：children调用一个registerChild()方法，parent在需要调用的时候遍历所有注册的children。我觉得这个实现很麻烦。

3. 服务是全局/单例。我会投票反对将服务实现与 UI 需求联系起来。

我的建议看起来像您对选项 3 的实现，但父控制器持有数据：

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

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

sharedThing 可以在服务返回新数据时更新，或在任何其他需要时更新。

2) 让孩子需要父母（就像您的选项 2），并观看此属性：

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
                }
            });
        }
    };
});

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