Javascript 需要指令'；将控制器插入另一个指令中

我试图让两个指令通过它们的（内部定义的）控制器相互通信，但我对angular还不熟悉，在一些方面还不清楚

本质上，我只需要两个独立的指令，当你点击指令A中的一个元素时，B中的一些函数就会执行；我想告诉B根据A中发生的情况进行自我更新。到目前为止，我得到了：

app.directive('A', function(){
    return{
        restrict: 'E',
        require:'B',
        templateUrl:'a.html',
        link: function(scope, element, attr, bController){
            //should I run B's behavior here?
            //how? can't reach B's controller
        },
        controller: function(){
            //or here?
            //how do I access B's controller here?
        },
        controllerAs:'A'
    };
});

app.directive('B', function(){
    return{
        restrict: 'E',
        templateUrl:'b.html',
        link: function(scope, element, attr){

        },
        controller: function(){
            //here there'll be functions that manipulate
            //elements inside this directive (B)
        },
        controllerAs:'B'
    };
});

我收到一个错误，因为A试图找到名为B的控制器，但它是一个指令：

另外，我应该从

链接

函数或指令控制器中操作元素吗？即使在阅读之后，我仍然对

链接

与

控制器

有点模糊；在我看来：

link

就像某种构造函数，而控制器则是行为发生的地方

这是否意味着我总是将DOM操作放在控制器内部

---

还有其他办法吗？我已经读了一些关于

$scope

，但仍然不完全清楚。

您只能在父元素或同一元素中要求指令。你可能在A里面用了B，或者相反

如果是这种情况，一个指令在另一个指令中使用，则可以使用：

require:“^A”

转到内部指令并要求外部指令。

^

意味着它可以是您父母的指令

如果指令是同级的，您可以构建第三个指令，该指令将作为它们的父指令，并要求从两者内部执行，它们将使用此媒介进行通信：

app.directive（'C'，function（）{
返回{
控制器：函数（）{
this.registerPartyA=函数（partyA）{
// ...
};
this.registerPartyB=函数（partyB）{
// ...
};
}
}
});

然后从你的指令

app.directive（'B'，function（）{
返回{
要求：“^C”，
链接：功能（范围、elm、attr、cCtrl）{
cCtrl.注册方B（…）；
//也许当用户点击你做的
//cCtrl.aCtrl.doSomething（）
}
};
});

如果它们无论如何都不相关，您仍然可以使用一个服务并在两个指令中注入该服务，并将其用作公共位置

最后，如果两个指令共享相同的作用域（在相同的元素下，或者没有一个指令需要独立的/子作用域），您可以直接在

$scope

内声明该方法，并从另一个指令调用它：

app.directive('A', function() {
  return {
    controller: function($scope) {
      $scope.declaredByA = function() {
        // ...
      };
    }
  };
});

app.directive('B', function() {
  return {
    controller: function($scope) {
      $scope.clicked = function() {
        $scope.declaredByA();
      };
    }
  };
});

最后一个电话，你可以用它来沟通

---

只要您满足要求，我会按照我提到的顺序尝试。

您只能在父元素或同一元素中要求指令。你可能在A里面用了B，或者相反

如果是这种情况，一个指令在另一个指令中使用，则可以使用：

require:“^A”

转到内部指令并要求外部指令。

^

意味着它可以是您父母的指令

如果指令是同级的，您可以构建第三个指令，该指令将作为它们的父指令，并要求从两者内部执行，它们将使用此媒介进行通信：

app.directive（'C'，function（）{
返回{
控制器：函数（）{
this.registerPartyA=函数（partyA）{
// ...
};
this.registerPartyB=函数（partyB）{
// ...
};
}
}
});

然后从你的指令

app.directive（'B'，function（）{
返回{
要求：“^C”，
链接：功能（范围、elm、attr、cCtrl）{
cCtrl.注册方B（…）；
//也许当用户点击你做的
//cCtrl.aCtrl.doSomething（）
}
};
});

如果它们无论如何都不相关，您仍然可以使用一个服务并在两个指令中注入该服务，并将其用作公共位置

最后，如果两个指令共享相同的作用域（在相同的元素下，或者没有一个指令需要独立的/子作用域），您可以直接在

$scope

内声明该方法，并从另一个指令调用它：

app.directive('A', function() {
  return {
    controller: function($scope) {
      $scope.declaredByA = function() {
        // ...
      };
    }
  };
});

app.directive('B', function() {
  return {
    controller: function($scope) {
      $scope.clicked = function() {
        $scope.declaredByA();
      };
    }
  };
});

最后一个电话，你可以用它来沟通

---

只要您满足要求，我会按照我提到的顺序尝试。

来自AngularJS控制器文档：

使用控制器可以：

• 设置$scope对象的初始状态
• 将行为添加到$scope对象

不要使用控制器来：

• 操纵DOM-控制器应仅包含业务逻辑。 将任何表示逻辑放入控制器会显著影响 它的可测试性。Angular为大多数情况和指令提供数据绑定 封装手动DOM操作
• 格式化输入-改用角度窗体控件。过滤器输出-使用角度过滤器代替
• 跨控制器共享代码或状态-改用角度服务。
• 管理其他组件的生命周期（例如，创建 服务实例）

---

从指令的AngularJS文档中：

可以将指令视为DOM元素（例如 属性、元素名、注释或CSS类）来告诉AngularJS的 HTML编译器（$compile）将指定的行为附加到该DOM 元素，甚至转换DOM元素及其子元素

因此，为了清楚起见，您不应该从控制器中操纵DOM。您应该始终使用指令

link

函数来操作DOM

如果希望控制器共享状态信息