Javascript AngularJS指令$destroy

我有一个带有

ng view

的angular应用程序设置。在一个视图中，除了视图本身之外，该视图中还有一个动态加载的组件。该组件是一个指令，本质上编译内容，以便内容可以进一步与其他指令挂钩（实际上是这样的）。该组件中的内容是使用

$compile（element.contents（））（scope）编译的

例如：



angular.directive（'viewer'，['$compile'，'$anchorScroll'，函数（$compile，$anchorScroll）{
返回函数（范围、元素、属性）{
范围.$watch(
职能（范围）{
var文件=范围$eval（属性文件）；
如果（！doc）
返回“”
返回doc.html；
},
函数（值）{
html（值）；
$compile（element.contents（））（范围）；
}
);
};
}]);

我的问题是，当我切换路由时，我实际上会切换
ng视图
或
viewer
的内容。我遇到的问题是内存泄漏，
viewer
中的其他指令钩住事件，当路由更改时不会清除

其中一个例子如下：

angular.directive('i18n', ['$rootScope', 'LocaleService', function($rootScope, LocaleService) {
  var cleanup;
  return {
    restrict: 'EAC',
    compile: function(element, attrs) {
      var originalText = element.text();
      element.text(LocaleService.getTranslation(originalText, attrs.locale));
      cleanup = $rootScope.$on('locale-changed', function(locale) {
        element.text(LocaleService.getTranslation(originalText, attrs.locale || locale));
      });
    },
    link: function(scope) {
      scope.$on('$destroy', function() {
        console.log("destroy");
        cleanup();
      });
    }
  };
}]);

如何使用它以便正确地清理这些事件？
如果您只使用过一次，那么您提供的i18n示例将起作用

我认为您不应该在编译函数中进行事件绑定。您可以在链接函数中执行此操作：

angular.directive('i18n', ['$rootScope', 'LocaleService', function($rootScope, LocaleService) {
  return {
    restrict: 'EAC',
    link: function(scope, element, attrs) {
      var cleanup;
      var originalText = element.text();
      element.text(LocaleService.getTranslation(originalText, attrs.locale));
      cleanup = $rootScope.$on('locale-changed', function(locale) {
        element.text(LocaleService.getTranslation(originalText, attrs.locale || locale));
      });
      scope.$on('$destroy', function() {
        console.log("destroy");
        cleanup();
      });
    }
  };
}]);

或者，您可以在子作用域本身上绑定事件，并在
$rootScope
上使用
$broadcast
来触发它。这样，当作用域被销毁时，事件将自动被垃圾收集：

angular.directive('i18n', ['$rootScope', 'LocaleService', function($rootScope, LocaleService) {
  return {
    restrict: 'EAC',
    link: function(scope, element, attrs) {
      var originalText = element.text();
      setElText();
      function setElText(locale){
        element.text(LocaleService.getTranslation(originalText, attrs.locale || locale));
      }
      scope.$on('locale-changed', setElText);
    }
  };
}]);

$rootScope.$broadcast('locale-change', 'en-AU');

我的问题是，新的i18n指令会在我四处浏览时出现。因此，它不只是使用一次。考虑一个案例，在每个代码< >代码>中，我有一个<代码>最后更新的< /代码>。这将在每次我更改
ng视图时加载
对不起，我说的第一句话的意思是，您当前的实现只会清理最后绑定的事件侦听器。因为
cleanup
var是在指令的“工厂”部分声明的。我提供的两个样品应该符合你的要求。这是有道理的。需要另外一个步骤来完成这项工作。请参阅：@Clark Pan在第二个示例中，您似乎使用$scope而不是scope。