Question

我试图在标签上放一个关闭按钮，然后从DOM中删除该标签...

我可能没有以正确的Angular方式进行，因为当我这样做时，tabset就会死掉，我再也无法更改标签了。

我不想使用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版本＆lt; 1.3有这个问题。每当删除transcluded指令中的任何dom节点时，其中的所有范围都将被销毁。

选中此处了解详情：http://fiddle.jshell.net/6qdhX/19/

将角度版本升级到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。

如何用指令关闭选项卡？

1 个答案: