angularjs – 有条件地向元素添加角度指令属性

有一个直接的,简单的方法来做以下的事情 –

<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”指令.

如果一个属性的表达式计算为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) {

    // 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;

                }
            };

        }
    };
}]);

原文地址：https://www.jb51.cc/angularjs/142837.html