Question

使用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。

Answer 1

编辑：误解了问题

似乎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）。我自己还没有尝试过。

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

1 个答案:

原始答案：