有一个直接的,简单的方法来做以下的事情 –
<div class="my-class" my-custom-directive="{{evaluate expression}}"></div>
那么角度不会添加指令,除非表达式被评估为true？
编辑：
该指令必须是一个属性,所以请,没有解决方案
ng-if与限制：’E’
ng-class与restrict：’C’或ng-attr – 不适用于自定义指令.
可以通过创建具有高优先级和终端的指令来实现此目的：true.然后,您可以调用元素属性(添加或删除它们),然后重新编译元素以使命令运行.
这是例子作为一个plunk：http://plnkr.co/edit/DemVGr?p=info
更改“directive-if”属性中的表达式来保留/删除“logger”指令.
<div directive-if="{'logger': 'myValue == 1'}"
logger="testValue">
<p>"logger" directive exists? <strong>{{logger}}</strong></p>
</div>
这是指令实现.
通过一些细微的调整,您可以将其交换为添加指令,而不是删除它们,如果这是你想要的.
/**
* The "directiveIf" directive allows other directives
* to be dynamically removed from this element.
*
* Any number of directives can be controlled with the object
* passed in the "directive-if" attribute on this element:
*
* {'attributeName': 'expression'[,'attribute': 'expression']}
*
* If `expression` evaluates to `false` then `attributeName`
* will be removed from this element.
*
* Usage:
*
* <any directive-if="{'myDirective': 'expression'}"
* my-directive>
* </any>
*
*/
directive('directiveIf',['$compile',function($compile) {
// Error handling.
var compileGuard = 0;
// End of error handling.
return {
// Set a high priority so we run before other directives.
priority: 100,// Set terminal to true to stop other directives from running.
terminal: true,compile: function() {
return {
pre: function(scope,element,attr) {
// Error handling.
//
// Make sure we don't go into an infinite
// compile loop if something goes wrong.
compileGuard++;
if (compileGuard >= 10) {
console.log('directiveIf: infinite compile loop!');
return;
}
// End of error handling.
// Get the set of directives to apply.
var directives = scope.$eval(attr.directiveIf);
angular.forEach(directives,function(expr,directive) {
// Evaluate each directive expression and remove
// the directive attribute if the expression evaluates
// to `false`.
var result = scope.$eval(expr);
if (result === false) {
// Set the attribute to `null` to remove the attribute.
//
// See: https://docs.angularjs.org/api/ng/type/$compile.directive.Attributes#$set
attr.$set('logger',null)
}
});
// Remove our own directive before compiling
// to avoid infinite compile loops.
attr.$set('directiveIf',null);
// Recompile the element so the remaining directives
// can be invoked.
var result = $compile(element)(scope);
// Error handling.
//
// Reset the compileGuard after compilation
// (otherwise we can't use this directive multiple times).
//
// It should be safe to reset here because we will
// only reach this code *after* the `$compile()`
// call above has returned.
compileGuard = 0;
}
};
}
};
}]);
