我是否必须使用类似发布/订阅的服务机制来进行指令通信

Question

这是我的外部指令的模板文件：

<div class="outerDirective">
    <span>{{imgLoadStatus}}</span> 

    <imgDirective class="innerDirective">
        <img src="img/src.jpg"/>
    </imgDirective>

</div>

如您所见，我有两个嵌套指令。一个是保存图像，一个是显示加载状态。 我需要更新外部指令的imgLoadStatus $scope 变量。

我知道我可以通过一种 Pub/Sub 服务来管理它，但我很好奇，有没有针对这种工作的 Angular 构建方式？还是您更喜欢不同的方式？

Answer 1

在内部指令的定义中，您需要定义一个“范围”属性。

angular.module(...).directive(..., ...function () {

    var innerDirective = {
        templateUrl : ...,

        scope : {
            loadingState : "="
        },

        link : function (scope, el, attrs, ctrl) {
            scope.update = function () {
                scope.loadingState.current += 1;
            };
        }
    };

    return innerDirective;

在外部指令的模板中，当您调用内部指令时，您将添加一个“加载状态”属性，并将外部指令的范围属性传递给它。 // 在你的外部指令中： // $scope.loading.current = 0; // $scope.$watch("loading.current", function (newVal) { $scope.updateView(newVal); });

loadingState : "=" 是内部作用域和外部作用域之间的双向数据绑定。 您在内部范围内给它的名称是它在 HTML 中期望的属性的名称（几乎就像 HTML 现在有您的构造函数参数一样）。

在某些情况下，这不会双向，只会从父母传给孩子。
就像您尝试制作 ngRepeat 内部指令一样。
或者，如果您使用 ngIf 来添加/删除子指令。

我不相信这是记录在案的行为，但我相信这是当前行为。