如何使用指令关闭选项卡？

Question

我正在尝试在选项卡上放置一个关闭按钮，然后将该选项卡从 DOM...

中删除

我可能没有以正确的方式 Angular 这样做，因为当我这样做时，标签集就死了，我不能再更改标签了。

我不想使用 ng-repeat，而是让该指令在人们手动定义他们的选项卡时起作用

我创建了 a 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);
      })
    }
  };
});

我破坏了多个作用域，所以我猜我通过删除元素来降低太多作用域？

Answer 1

Angular 版本 < 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);
            });
        }
    };
};

使用此指令代替 ng-transclude。

如何使用指令关闭选项卡？

How to close a tab with a directive?

javascript

twitter-bootstrap

angularjs

angular-ui-bootstrap