Question

我正在尝试为angularjs应用程序构建一个弹出窗口（对话框）指令。（仍然很多待...）但是我创建了一个模板文件，用于构建弹出元素，并插入使用directive元素传递的属性中的值。

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

<!-- ngIf: active -->

相关要素之前和之后。 所以我得到的是注释，而不是控制器中$ element参数中的实际元素！

为什么＆＃39; nt 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>

现在我的角度代码：

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添加节点并从DOM中删除节点（因此我猜插入像您的指令中的注释），而ng-show和ng-hide只是通过样式使节点不可见，保持所有处理程序的存活并允许您轻松操作内容。

由于ng-if，angularjs指令'$ element'是注释

1 个答案: