javascript - 如何结合嵌入、替换和ngIf？

Question

使用 Angular 1.2.9(撰写本文时的最新稳定版)。显示问题的指令的最小示例:

myApp.directive('panel', function() {
    return {
        transclude: true,
        replace: true,
        template: '<div ng-if="showPanel" ng-transclude></div>',
    };
});

jsFiddle:http://jsfiddle.net/HB7LU/3782/打开控制台并切换复选框。它提示一个孤立的ngTransclude。据我所知，这与 ngIf 也使用嵌入有关。

我不确定这是一个 Angular 错误还是我做错了什么。

我可以想到一些解决方法:

• 删除 ng-if 并手动实现其行为。但它的实现有几十行，而且我不太理解它，无法自信地重现它。
• 停止使用替换，停止使用模板，并在指令元素本身上设置所有需要的样式和类。这将需要一堆 JavaScript 代码来在代码中重现模板的结构。

任何解决方案/解决方法的限制:

• 因为我使用的是 Flexbox，所以生成的元素必须是指令父元素的直接子元素(即替换的作用)。
• ngIf 无法移至指令之外，因为实际上我使用的条件依赖于指令的隔离范围。

有没有更好的方法让它发挥作用？

Answer 1

最简单的方法是使用 ng-show 而不是 ng-if。

如果由于某种原因，您绝对需要从 DOM 树中删除该元素，那么创建自定义解决方案并不困难。嵌入只是一个简单的函数调用，剩下的就归结为观察一个值并从 DOM 中添加/删除元素:

return {
    transclude: true,
    replace: true,
    scope: {
        showPanel: '='
    },
    template: '<div></div>',
    link: function(scope, element, attrs, controller, transclude) {
        var parent = element.parent(),
            insertAfter = angular.element(element[0].previousSibling);

        transclude(scope.$parent, function (clone) {    
           element.append(clone);
        });

        scope.$watch('showPanel', function(value) {
            if (value) {         
              $animate.enter(element, parent, insertAfter);  
            }
            else {
              $animate.leave(element);
            }
        });
    }
};

这是一个working fiddle 。当然，您可能想根据自己的情况进行调整。如果您不需要动画，只需使用 angular.element 的相应方法。