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

Question

使用 AngularJS 1.5，我构建了一个自定义属性指令，它向元素添加了一个日期范围选择器指令及其选项：

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 指令之前执行，并且正在呈现日期选择器。

Answer 1

编辑：误解了问题

看起来 ng-switch-when 也被应用于属性指令，但它要么认为它不在 ng-switch 内，要么它无权访问外部范围，因此 ng-switch-when 解析为 false.

有几个解决方案：

1) 将 input 包裹在 span 中并将 ng-switch-when 放在上面而不是 input

2) 去掉指令中的ng-switch-when属性element.removeAttr("ng-switch-when");

两者似乎都有效（在 Plunker 中进行实验时）。就个人而言，我更喜欢第一个，因为它都在模板中。

原回答：

ng-switch 影响它所在的元素，而不是其中的属性。有条件地显示自定义属性的几种方法：

如果你想使用ng-switch，你可以有两个输入：

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

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

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

您也可以使用 this to conditionally apply the attribute (see this question)。我自己没试过。

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

Angular JS - adding a custom directive to an element with ng-switch-when directive

javascript

angularjs

angularjs-directive

ng-switch

angularjs-ng-switch

原回答：