Angular JS-使用ng-switch-when指令将自定义指令添加到元素

时间:2018-11-07 11:56:11

标签: javascript angularjs angularjs-directive ng-switch angularjs-ng-switch

使用AngularJS 1.5,我构建了一个自定义属性指令,该指令将date-range-picker指令及其选项添加到元素中:

app.directive('clSingleDatePicker', function($compile) {
    var opts_single_date = {
        singleDatePicker: true
    };
    return {
        restrict: 'A',
        compile: function compile(element, attrs) {
            element.attr('date-range-picker', '');
            element.attr('options', 'opts');
            element.removeAttr("cl-single-date-picker"); //remove the attribute to avoid indefinite loop
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {
                },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    scope.opts = opts_single_date;
                    $compile(iElement)(scope);
                }
            };
        }
    };
});

当我将此指令添加到这样的简单输入中时:

<input cl-single-date-picker type="text" ng-model="someModel"/>

我将在DOM中获得所需的结果:

<input type="text" ng-model="someModel" class="ng-pristine ng-valid ng-scope ng-isolate-scope ng-empty ng-touched" date-range-picker="" options="opts" style="">

日期范围选择器处于活动状态并且正在工作。 但是,如果要向元素中添加条件指令,则在我的情况下ng-switch-when:

<input  ng-switch-when="1" cl-single-date-picker type="text" ng-model="someModel"/>

即使正在执行指令功能,也将完全不呈现此元素。如何将指令添加到具有条件指令的元素上并呈现?

有效的解决方案(已编辑) 通过添加一个高于ng-switch的优先级值(即1200 apparently),现在将在ng-switch-then指令之前执行自定义指令,并渲染datepicker。

1 个答案:

答案 0 :(得分:0)

编辑:误解了问题

似乎ng-switch-when也被应用到attribute指令,但是它认为它不在ng-switch内,或者无法访问外部作用域,因此{{1 }}解析为ng-switch-when

有两种解决方案:

1)将false包裹在input中,然后在其上放置span而不是ng-switch-when

2)删除指令input中的ng-switch-when属性

两者似乎都起作用(在Plunker中进行实验时)。就个人而言,我更喜欢第一个,因为它都在模板中。


原始答案:

element.removeAttr("ng-switch-when");会影响它所在的​​元素,而不影响其中的属性。有几种条件显示自定义属性的方法:

如果您想使用ng-switch,则可以有两个输入:

ng-switch

或者,您可以在指令上add an extra attribute并在指令中进行检查,例如

<input ng-switch-when="1" cl-single-date-picker type="text" ng-model="someModel"/>
<input ng-switch-when="2" type="text" ng-model="someModel"/>

您也许还可以使用this有条件地应用该属性(请参见this question)。我自己还没有尝试过。