javascript - AngularJS - 相同级别的指令错误地使用相同的名称方法

Question

我有两个指令:directiveA 和directiveB，卡在我的 AngularJS 应用程序中的同一模块中。它们在同一个 HTML 模板中处于同一级别调用，因此我们可以说它们是兄弟。

<directive-a>
<directive-b>

它们都有一个悬卡在其范围内的自己的方法，如下所示:

$scope.clickOkey = function () {
       ... whatever
     };

它们都有“clickOkey”方法，但它们的行为不同。当我尝试从指令 A 的模板中调用指令 A 的“clickOkey”时，我的问题就出现了。它执行指令B 中的“clickOkey”。

directiveA 自己的模板内部:

<label ng-click="clickOkey()">Okey</label>

它们处于同一级别，因此它们不应该共享其 $scope 或误解方法。

另外，重要的是，如果我将方法的名称更改为“clickOkeyA”，例如，它会采用正确的方法，因此模板可以毫无问题地访问其范围。

我错过了什么？感谢您的帮助!

编辑:两个指令都是独立的并且都有一个 Controller ，并且每个指令内部都定义了一个“clickOkey”方法。有两个同名的方法。

两个指令都是这样的:

angular.module('myModule').directive('directiveA', function () {
    return {
        restrict: 'AE',
        templateUrl: '/whatever.html',
        controller: function ($scope, $http, $rootScope) {

            $scope.clickOkey = function () {
               ... whatever
             };
        }
    }
});

Answer 1

您应该向您的指令添加一个独立的范围: https://docs.angularjs.org/guide/directive

对于您的指令，它将是:

angular.module('myModule').directive('directiveA', function () {
  return {
    restrict: 'AE',
    templateUrl: '/whatever.html',
    scope : {},
    controller: function ($scope, $http, $rootScope) {

        $scope.clickOkey = function () {
           ... whatever
         };
    }
  }
});