使用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。
答案 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)。我自己还没有尝试过。