5

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

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

<!-- 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! ***/

    }],
};
}]);

我会非常感谢任何评论。

4

1 回答 1

3

我不确定我是否完全理解您的问题,但是如果您想在这些元素上使用指令,我建议您使用ng-showandng-hide而不是ng-if,因为后者确实可以与您通过指令应用的任何事件处理程序一起使用。

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

于 2014-10-06T08:14:13.500 回答