如何使用指令关闭选项卡

How to close a tab with a directive?

本文关键字：选项 何使用 指令      更新时间：2023-09-26

我正试图在一个选项卡上放置一个关闭按钮，然后从DOM中删除该选项卡。。。

我可能没有以正确的角度方式进行操作，因为当我进行操作时，选项卡集会失效，我无法再更改选项卡。

我不想使用ng重复，而是让指令工作时，人们已经手动定义了他们的标签

我创建了一个显示问题的plunker。

angular.module('ui.bootstrap.demo').directive('tabClosable', function() {
   return {
    restrict: 'A',
    require: '^tab',
    link: function(scope, element, attributes) {
      console.log(element);
      var closeButton = angular.element('<button>x</button>');
      element.children().eq(0).append(closeButton);
      closeButton.bind('click', function() {
        console.log("click");
        element.remove();
      });
      scope.$on('$destroy', function() {
        console.log('scope destroyed: ');
        console.log(scope.$id);
      })
    }
  };
});

我销毁了多个作用域，所以我猜我通过删除元素来减少了太多作用域？

角度版本<1.3存在此问题。每当transcluded指令中的任何dom节点被删除时，它内部的所有作用域都将被销毁。

查看此项以了解更多详细信息：http://fiddle.jshell.net/6qdhX/19/

升级您的angular版本至1.3

如果您仍然想继续使用1.2，可以尝试以下解决方案。1.创建appTransclude指令。

directive('appTransclude', function() {
    "use strict";
    return {
        "restrict": "A",
        "link": function (scope, element, attrs, nullCtrl, transcludeFn) {
            var elScope = element.scope();
            transcludeFn(elScope, function (clone) {
                element.append(clone);
            });
        }
    };
};
  1. 使用此指令而不是ng-transclude
相关文章：