39

我有一个 Angular 应用程序设置ng-view。在一个视图中，除了视图本身之外，该视图内部还有一个动态加载的组件。该组件是一个指令，它本质上是编译内容，因此内容可以进一步与其他指令挂钩（它就是这样）。该组件内的内容是使用$compile(element.contents())(scope);.

举个例子：

<ng-view>
  <viewer doc="getDocument()">
  </viewer>
</ng-view>

angular.directive('viewer', ['$compile', '$anchorScroll', function($compile, $anchorScroll) {
  return function(scope, element, attrs) {
    scope.$watch(
      function(scope) {
        var doc = scope.$eval(attrs.doc);
        if (!doc)
          return ""
        return doc.html;
      },
      function(value) {
        element.html(value);
        $compile(element.contents())(scope);
      }
    );
  };
}]);

我的问题是当我切换路线时，我本质上是切换ng-view或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();
      });
    }
  };
}]);

我如何才能正确清理这些事件？

4

1 回答 1

55

如果您只使用过一次，您提供的 i18n 示例就可以使用。

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

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();
      });
    }
  };
}]);

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

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');
于 2013-06-19T23:44:47.453 回答