Javascript AngularJS在动态加载指令中注销事件侦听器

我有一个动态加载的指令，用于侦听来自其父级的事件。发生的情况是，该事件在指令中被处理了两次，即使父级仅广播该事件一次。这件事被听了好几遍，我不知道该在哪里澄清

这里是Plunker的例子。您可以通过单击“父单击”按钮触发父事件，处理程序使用console.log（）打印文本。您将看到console.log被执行了两次

这是我的剧本：

(function(angular) {
  'use strict';

  var myAppModule = angular.module('myApp', []);

  myAppModule.controller('myController', function($scope, $rootScope) {

    $scope.directiveId = 'my-directive1';
    $scope.directiveData = 'Directive 1 data.';

    $scope.parentClick = function() {
      $rootScope.$broadcast("parentEvent", "hello from parent");
    }
  });

  myAppModule.directive('loaddirective', function($compile) {
    return {
      restrict: 'A',
      scope: {
        loaddirective: "=",
        directivedata: "="
      },
      link: function($scope, $element, $attr) {
        console.log('loaddirective link');
        var value = $scope.loaddirective;

        function update(value) {
          $element.html("<div " + value + " directivedata='directivedata'></div>");
          $compile($element.contents())($scope);
        }
        if (value) {
          update(value);
        }
        $scope.$watch('loaddirective', update);
      },
      controller: ['$scope',
        function($scope) {
          console.log('loaddirective controller');
        }
      ]
    };
  });

  myAppModule.directive('myDirective1', function() {
    return {
      templateUrl: 'my-directive1.html',
      scope: {
        directivedata: "="
      },
      controller: ['$scope',
        function($scope) {
          var offParentEvent = $scope.$on('parentEvent', function(event, arg) {

            // This event is getting handled twice here. 
            // This is due to my $watch in the 'loaddirective'
            // directive. I need this watch to be able to 
            // dynamically change this directive later.
            // My guess is I need to deregister this by
            // calling offParentEvent() somewhere but I don't
            // know where to do that.

            console.log('myDirective1 parentEvent data: ' + arg);

          });
        }
      ]
    };
  });

})(window.angular);

（函数（角度）{
"严格使用",；
var myAppModule=angular.module（'myApp'，[]）；
控制器（'myController'，函数（$scope，$rootScope）{
$scope.directiveId='my-directive1'；
$scope.directiveData='指令1数据'；
$scope.parentClick=function（）{
$rootScope.$broadcast（“家长事件”，“家长您好”）；
}
});
myAppModule.directive（'loaddirective'，函数（$compile）{
返回{
限制：“A”，
范围：{
loaddirective:“=”，
定向数据：“=”
},
链接：函数（$scope、$element、$attr）{
log（'loaddirective链接'）；
var值=$scope.loaddirective；
函数更新（值）{
$element.html（“”）；
$compile（$element.contents（））（$scope）；
}
如果（值）{
更新（价值）；
}
$scope.$watch（'loaddirective'，更新）；
},
控制器：[“$scope”，
职能（$范围）{
log（'loaddirective controller'）；
}
]
};
});
指令（'myDirective1'，函数（）{
返回{
templateUrl:'my-directive1.html'，
范围：{
定向数据：“=”
},
控制器：[“$scope”，
职能（$范围）{
var offParentEvent=$scope.$on（'parentEvent'，函数（event，arg）{
//这个事件在这里处理了两次。
//这是因为我的$watch在'loaddirective'中
//指令，我需要这只手表能
//稍后动态更改此指令。
//我想我需要在
//在某处调用offParentEvent（），但我没有
//知道在哪里做。
log（'myDirective1 parentEvent数据：'+arg）；
});
}
]
};
});
})（窗口角度）；

为什么需要使用

if（value）{update（value）}

手动调用

update

-这是您的第二次（而不是第一次）调用，但鉴于

$watch

我不知道$watch立即调用了update。删除你提到的if语句可以修复它。非常感谢！您仍然需要确保执行

元素。在（“$destroy”上，…

在

loaddirective

更改并创建新元素时分离旧元素的侦听器