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

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

我想到了三种方式：

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

我该怎么办？

请看这里看一个简短的代码： http://jsfiddle.net/v5xL0dg9/2/

谢谢！

Answer 1

ngModel用于双向绑定，即允许用户干扰值的控件。从描述中看，它们似乎只是显示组件。所以我建议不要使用ngModel。
通常，子指令需要其父级。这允许他们在父控制器上调用方法。你需要的是相反的：父控制器需要调用子进程上的方法。可以这样做：孩子们调用registerChild()方法，父母在需要调用它们时迭代所有注册的孩子。我觉得这个实现很麻烦。
服务是全局/单身。我会投票反对将服务实现与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
                }
            });
        }
    };
});

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

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

1 个答案: