angularjs 指令的 '$element' 是一个注释，因为 ng-if

Question

我正在尝试为我的 angularjs 应用程序构建一个弹出(对话框)指令。 (还有很多事情要做...)
但是，我制作了一个模板文件来构建弹出元素，并插入来自与指令元素一起传递的属性的值。

问题是，我在该模板中有几个 ng-ifs 用于检查范围内不同的属性值，然后 angular 插入注释，例如

<!-- ngIf: active -->

在相关元素之前和之后。 所以我在 Controller 的 $element 参数中得到注释而不是实际元素!

为什么 angular 不跳过那里的评论？我怎么能克服呢？？

我的模板代码(popup_template.html):

 <div class="{{className}}" ng-if="active" style="{{popupStyle}}" ng-keyup="closeByEscape($event)">
    <div class="vex-overlay" style="{{overlayStyle}}"></div>

    <div class="vex-content" style="{{contentStyle}}">
        <form class="vex-dialog-form" ng-if="type=='plain'">
            <div class="vex-dialog-message" ng-if="message!=null">
                {{message}}
            </div>
        </form>
        <div ng-if="type=='advanced'" class="transcluded">

        </div>
        <div class="vex-close" ng-if="showCloseButton" ng-click="close()"></div>
    </div>
</div>

现在我的 Angular 代码:

app.directive('popup', ['popupfactory', '$timeout', function (popupfactory, $timeout) {
return {
    restrict: 'E',
    replace: true,
    templateUrl: 'popup_template.html',
    transclude: true,
    scope: false,
    link: function (scope, element, attrs, $timeout) {

        /* Declarations of all scope variables*/

        /*** Here, element is a comment! ***/

    },
    controller: ['$scope', '$element', '$attrs', '$transclude', '$http', function ($scope, $element, $attrs, $transclude, $http) {

      /*** Here, $element is a comment! ***/

    }],
};
}]);

我将非常感谢您的任何评论。

Answer 1

我不确定我是否完全理解你的问题，但如果你想在这些元素上使用指令，我建议使用 ng-show和 ng-hide而不是 ng-if ，因为后者可以真正搞砸你通过指令应用的任何事件处理程序。

与 ng-if在 ng-show 中添加和从 DOM 中删除节点(因此我猜想像注释一样插入到您的指令中)和 ng-hide只需通过样式使节点不可见，使任何处理程序保持事件状态并允许您轻松操作内容。