由于ng-if,angularjs指令的’$element’是注释

前端之家收集整理的这篇文章主要介绍了由于ng-if,angularjs指令的’$element’是注释前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试为 angularjs应用程序构建一个弹出窗口(对话框)指令. (仍然很多待…)
但是,我创建了一个模板文件,用于构建弹出元素,并插入使用directive元素传递的属性中的值.

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

<!-- ngIf: active -->

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

为什么没有角度跳过那里的评论?我怎么能克服那个?

我的模板代码(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! ***/

    }],};
}]);

我会非常感谢任何评论.

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

使用ng-if节点是从DOM中添加删除的(因此我想插入像你的指令中的注释),而ng-show和ng-hide只是通过样式使节点不可见,让任何处理程序保持活着并允许你操作内容很容易.

猜你在找的Angularjs相关文章