Angularjs 在移动元素时防止Angular JS指令触发两次

每次追加元素时，它都会再次触发指令。我只想将elem移动到icr主模态放置元素中

.directive('icrMainModal', function() {
  return {
    restrict: 'E',
    templateUrl: 'views/icr-main-modal.html',
    scope: {
      state: '=icrVState'
    },
    transclude: true,
    compile: function(elem, attrs) {

      angular.element('icr-main-modal-placement').append(elem); // because of this, the directive is fired again. I just want to move elem into 'icr-main-modal-placement'

      return function(scope, elem) {

        scope.$on('$destroy', function() {
          return elem.remove();
        });

      };

    }
  };
});

---

我能想到的一种方法是将此指令设置为Attribute而不是Element，并在compile/link方法中删除该属性

.directive('icrMainModal', function() {
  return {
    restrict: 'A',
    templateUrl: 'views/icr-main-modal.html',
    scope: {
      state: '=icrMainModal'
    },
    transclude: true,
    compile: function(elem, attrs) {
      elem.removeAttr('icr-main-modal');
      angular.element('icr-main-modal-placement').append(elem); 

      return function(scope, elem) {

        scope.$on('$destroy', function() {
          return elem.remove();
        });

      };
    }
  };
});

---

你能展示你的html关于你是如何使用它的吗？是的！这也是我所想的，令人沮丧的是，似乎只有一个解决办法，而不是一个解决方案（也许，这不是一个常见的问题）。但这对我来说很有效，谢谢你的关注！