有没有一种简单直接的方法来做以下事情 -
<div class="my-class" my-custom-directive="{{evaluate expression}}"></div>
如此一来,只有当表达式的值为真时,Angular才会添加该指令。
编辑:
该指令必须是一个属性,所以请不要使用像restrict: 'E'
的ng-if
解决方案,
也不要使用restrict: 'C'
的ng-class
或ng-attr
- 它们不能用于自定义指令。
有没有一种简单直接的方法来做以下事情 -
<div class="my-class" my-custom-directive="{{evaluate expression}}"></div>
如此一来,只有当表达式的值为真时,Angular才会添加该指令。
编辑:
该指令必须是一个属性,所以请不要使用像restrict: 'E'
的ng-if
解决方案,
也不要使用restrict: 'C'
的ng-class
或ng-attr
- 它们不能用于自定义指令。
terminal: true
的指令,可以实现此操作。然后,您可以调整元素属性(添加或删除它们),然后重新编译元素以让指令运行。false
,则该属性将被移除。<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) {
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() {
// Error handling - avoid accidental infinite compile calls
var compileGuard = 0;
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(directive, null)
}
});
/*
Recompile the element so the remaining directives can be invoked.
Pass our directive name as the fourth "ignoreDirective" argument
to avoid infinite compile loops.
*/
var result = $compile(element, undefined, undefined, 'directiveIf')(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;
}
};
}
};
}]);
@Sly_cardinal是正确的,我使用了他的代码,但是需要做一些调整:
(function () {
angular.module('MyModule').directive('directiveIf', 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;
}
// Get the set of directives to apply.
var directives = scope.$eval(attr.directiveIf);
for (var key in directives) {
if (directives.hasOwnProperty(key)) {
// if the direcitve expression is truthy
if (directives[key]) {
attr.$set(key, true);
} else {
attr.$set(key, 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;
}
};
}
};
});
})();
directive-if="{'logger': myValue == 1}"
(请注意,myValue == 1
是一个表达式而不是字符串),那么您就不需要在循环内部再次使用第二个scope.$eval(expr)
。 - Sly_cardinal