从AngularJS中的指令添加指令


197

我正在尝试构建一个指令,该指令负责将更多指令添加到声明它的元素上。例如,我要建立一个指令,需要增加的照顾datepickerdatepicker-languageng-required="true"

如果我尝试添加这些属性然后使用,则$compile显然会生成一个无限循环,因此我正在检查是否已添加所需的属性:

angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function compile(scope, element, attrs) {
        if (element.attr('datepicker')) { // check
          return;
        }
        element.attr('datepicker', 'someValue');
        element.attr('datepicker-language', 'en');
        // some more
        $compile(element)(scope);
      }
    };
  });

当然,如果我没有$compile该元素,则将设置属性,但不会引导该指令。

这种方法正确还是我做错了?有没有更好的方法来实现相同的行为?

UDPATE:鉴于这$compile是实现此目标的唯一方法,是否有一种方法可以跳过第一个编译过程(该元素可能包含多个子级)?也许通过设置terminal:true

更新2:我尝试将指令放入一个select元素,并且按预期方式,编译运行两次,这意味着预期options 的数量是原来的两倍。

Answers:


260

如果在单个DOM元素上有多个指令,并且应用顺序很重要,则可以使用priority属性来排序其应用程序。较高的数字优先。如果未指定,则默认优先级为0。

编辑:讨论之后,这是完整的工作解决方案。关键是要删除属性element.removeAttr("common-things");,以及element.removeAttr("data-common-things");(如果用户data-common-things在html中指定)

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false, 
      terminal: true, //this setting is important, see explanation below
      priority: 1000, //this setting is important, see explanation below
      compile: function compile(element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        return {
          pre: function preLink(scope, iElement, iAttrs, controller) {  },
          post: function postLink(scope, iElement, iAttrs, controller) {  
            $compile(iElement)(scope);
          }
        };
      }
    };
  });

可以使用工作的监听器:http ://plnkr.co/edit/Q13bUt?p=preview

要么:

angular.module('app')
  .directive('commonThings', function ($compile) {
    return {
      restrict: 'A',
      replace: false,
      terminal: true,
      priority: 1000,
      link: function link(scope,element, attrs) {
        element.attr('tooltip', '{{dt()}}');
        element.attr('tooltip-placement', 'bottom');
        element.removeAttr("common-things"); //remove the attribute to avoid indefinite loop
        element.removeAttr("data-common-things"); //also remove the same attribute with data- prefix in case users specify data-common-things in the html

        $compile(element)(scope);
      }
    };
  });

演示

解释为什么我们必须设置terminal: trueand priority: 1000(一个很大的数字):

当DOM准备就绪时,angular遍历DOM以标识所有已注册的指令,并根据priority 这些指令是否在同一元素上来逐一编译指令。我们设定的自定义指令的优先级为较高的数字,以确保它会被编译首先,用terminal: true,其他指令将被跳过该指令被编译后。

编译我们的自定义指令时,它将通过添加指令并删除自身来修改元素,并使用$ compile服务编译所有指令(包括已跳过的指令)

如果我们没有设置terminal:truepriority: 1000,则有可能自定义指令之前编译了某些指令。当我们的自定义指令使用$ compile编译element =>时,再次编译已经编译的指令。这将导致无法预测的行为,尤其是如果在我们的自定义指令之前编译的指令已经转换了DOM。

有关优先级和终端的更多信息,请查看如何理解指令的“终端”?

也修改模板的指令的示例是ng-repeat(priority = 1000),在ng-repeat编译时,ng-repeat 在应用其他指令之前制作模板元素的副本

感谢@Izhaki的评论,这里是对ngRepeat源代码的引用:https : //github.com/angular/angular.js/blob/master/src/ng/directive/ngRepeat.js


5
它向我抛出了一个堆栈溢出异常:RangeError: Maximum call stack size exceeded它将永远进行编译。
frapontillo

3
@frapontillo:在您的情况下,请尝试添加element.removeAttr("common-datepicker");以避免无限循环。

4
好吧,我已经能够梳理出来,你必须设置replace: falseterminal: truepriority: 1000,然后在compile函数中设置所需的属性并删除我们的指令属性。最后,在由post返回的函数中compile,调用$compile(element)(scope)。该元素将在不使用custom指令但具有添加的属性的情况下进行定期编译。我要实现的目标不是要删除自定义指令,而是要在一个过程中处理所有这些指令:看来这无法完成。请参阅更新的plnkr:plnkr.co/edit/Q13bUt ? p= preview
frapontillo

2
请注意,如果您需要使用编译或链接函数的attributes对象参数,请知道负责插值属性值的指令的优先级为100,并且您的指令的优先级应低于此优先级,否则您将只能获得由于目录为终端,因此属性的字符串值。请参阅(请参阅此github拉取请求相关问题
Simen Echholt,2014年

2
作为删除common-things属性的替代方法,您可以将maxPriority参数传递给compile命令:$compile(element, null, 1000)(scope);
Andreas

10

实际上,您只需一个简单的模板标签就可以处理所有这些。有关示例,请参见http://jsfiddle.net/m4ve9/。注意,实际上我不需要超级指令定义上的compile或link属性。

在编译过程中,Angular在编译之前会提取模板值,因此您可以在此处附加任何其他指令,Angular会为您处理。

如果这是需要保留原始内部内容的超级指令,则可以使用transclude : true并替换为内部<ng-transclude></ng-transclude>

希望能有所帮助,让我知道是否有任何不清楚的地方

亚历克斯


谢谢Alex,这种方法的问题在于我无法对标签的名称做任何假设。在示例中,它是一个日期选择器,即一个input标签,但我想使其适用于任何元素,例如divs或selects。
frapontillo 2013年

1
啊,是的,我想念那个。在那种情况下,我建议您坚持使用div并确保您的其他指令可以在此上运行。这不是最干净的答案,但是最适合Angular方法。引导程序开始编译HTML节点时,它已经收集了该节点上的所有指令以进行编译,因此在其中添加新指令不会被原始引导程序注意到。根据您的需要,您可能会发现将所有内容包装在div中并在其中进行工作可以使您具有更大的灵活性,但同时也限制了放置元素的位置。
mrvdot

3
@frapontillo您可以将模板用作函数elementattrs传入其中。花了我很长时间才能解决该问题,而且我还没看到它在任何地方都可以使用-但它似乎可以正常工作:stackoverflow.com/a/20137542/1455709
帕特里克

6

这是一个解决方案,可将需要动态添加的指令移动到视图中,并添加一些可选的(基本)条件逻辑。这使指令保持整洁,没有硬编码的逻辑。

该指令采用一个对象数组,每个对象都包含要添加的指令的名称和要传递给它的值(如果有)。

我一直在努力思考类似这样的指令的用例,直到我认为添加一些仅基于某种条件添加指令的条件逻辑可能很有用(尽管下面的答案仍然是虚构的)。我添加了一个可选if属性,该属性应包含布尔值,表达式或函数(例如,在控制器中定义),该布尔值,表达式或函数确定是否应添加指令。

我还attrs.$attr.dynamicDirectives用于获取用于添加指令(例如)的确切属性声明data-dynamic-directivedynamic-directive而不用硬编码要检查的字符串值。

Plunker Demo

angular.module('plunker', ['ui.bootstrap'])
    .controller('DatepickerDemoCtrl', ['$scope',
        function($scope) {
            $scope.dt = function() {
                return new Date();
            };
            $scope.selects = [1, 2, 3, 4];
            $scope.el = 2;

            // For use with our dynamic-directive
            $scope.selectIsRequired = true;
            $scope.addTooltip = function() {
                return true;
            };
        }
    ])
    .directive('dynamicDirectives', ['$compile',
        function($compile) {
            
             var addDirectiveToElement = function(scope, element, dir) {
                var propName;
                if (dir.if) {
                    propName = Object.keys(dir)[1];
                    var addDirective = scope.$eval(dir.if);
                    if (addDirective) {
                        element.attr(propName, dir[propName]);
                    }
                } else { // No condition, just add directive
                    propName = Object.keys(dir)[0];
                    element.attr(propName, dir[propName]);
                }
            };
            
            var linker = function(scope, element, attrs) {
                var directives = scope.$eval(attrs.dynamicDirectives);
        
                if (!directives || !angular.isArray(directives)) {
                    return $compile(element)(scope);
                }
               
                // Add all directives in the array
                angular.forEach(directives, function(dir){
                    addDirectiveToElement(scope, element, dir);
                });
                
                // Remove attribute used to add this directive
                element.removeAttr(attrs.$attr.dynamicDirectives);
                // Compile element to run other directives
                $compile(element)(scope);
            };
        
            return {
                priority: 1001, // Run before other directives e.g.  ng-repeat
                terminal: true, // Stop other directives running
                link: linker
            };
        }
    ]);
<!doctype html>
<html ng-app="plunker">

<head>
    <script src="//code.angularjs.org/1.2.20/angular.js"></script>
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.6.0.js"></script>
    <script src="example.js"></script>
    <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
</head>

<body>

    <div data-ng-controller="DatepickerDemoCtrl">

        <select data-ng-options="s for s in selects" data-ng-model="el" 
            data-dynamic-directives="[
                { 'if' : 'selectIsRequired', 'ng-required' : '{{selectIsRequired}}' },
                { 'tooltip-placement' : 'bottom' },
                { 'if' : 'addTooltip()', 'tooltip' : '{{ dt() }}' }
            ]">
            <option value=""></option>
        </select>

    </div>
</body>

</html>


在其他指令模板中使用。工作正常,可以节省时间。谢谢
jcstritt 2014年

4

我想添加我的解决方案,因为被接受的解决方案对我而言不太有效。

我需要添加一条指令,但也要保留我的元素。

在此示例中,我向元素添加了一个简单的ng-style指令。为了防止无限的编译循环并允许我保留指令,我在重新编译元素之前添加了检查以查看是否存在添加的内容。

angular.module('some.directive', [])
.directive('someDirective', ['$compile',function($compile){
    return {
        priority: 1001,
        controller: ['$scope', '$element', '$attrs', '$transclude' ,function($scope, $element, $attrs, $transclude) {

            // controller code here

        }],
        compile: function(element, attributes){
            var compile = false;

            //check to see if the target directive was already added
            if(!element.attr('ng-style')){
                //add the target directive
                element.attr('ng-style', "{'width':'200px'}");
                compile = true;
            }
            return {
                pre: function preLink(scope, iElement, iAttrs, controller) {  },
                post: function postLink(scope, iElement, iAttrs, controller) {
                    if(compile){
                        $compile(iElement)(scope);
                    }
                }
            };
        }
    };
}]);

值得注意的是,您不能将其与transclude或模板一起使用,因为编译器会在第二轮尝试重新应用它们。
spikyjt

1

尝试将状态存储在元素本身的属性中,例如 superDirectiveStatus="true"

例如:

angular.module('app')
  .directive('superDirective', function ($compile, $injector) {
    return {
      restrict: 'A',
      replace: true,
      link: function compile(scope, element, attrs) {
        if (element.attr('datepicker')) { // check
          return;
        }
        var status = element.attr('superDirectiveStatus');
        if( status !== "true" ){
             element.attr('datepicker', 'someValue');
             element.attr('datepicker-language', 'en');
             // some more
             element.attr('superDirectiveStatus','true');
             $compile(element)(scope);

        }

      }
    };
  });

我希望这可以帮助你。


谢谢,基本概念保持不变:)。我试图找出一种方法来跳过第一次编译通过。我已经更新了原始问题。
frapontillo 2013年

双重编译以可怕的方式破坏了事物。
frapontillo 2013年

1

从1.3.x更改为1.4.x。

在Angular 1.3.x中可以这样工作:

var dir: ng.IDirective = {
    restrict: "A",
    require: ["select", "ngModel"],
    compile: compile,
};

function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) {
    tElement.append("<option value=''>--- Kein ---</option>");

    return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) {
        attributes["ngOptions"] = "a.ID as a.Bezeichnung for a in akademischetitel";
        scope.akademischetitel = AkademischerTitel.query();
    }
}

现在在Angular 1.4.x中,我们必须这样做:

var dir: ng.IDirective = {
    restrict: "A",
    compile: compile,
    terminal: true,
    priority: 10,
};

function compile(tElement: ng.IAugmentedJQuery, tAttrs, transclude) {
    tElement.append("<option value=''>--- Kein ---</option>");
    tElement.removeAttr("tq-akademischer-titel-select");
    tElement.attr("ng-options", "a.ID as a.Bezeichnung for a in akademischetitel");

    return function postLink(scope: DirectiveScope, element: ng.IAugmentedJQuery, attributes: ng.IAttributes) {

        $compile(element)(scope);
        scope.akademischetitel = AkademischerTitel.query();
    }
}

(摘自Khanh TO 的已接受答案:https://stackoverflow.com/a/19228302/605586)。


0

在某些情况下可能有效的简单解决方案是创建包装并对其进行$ compile,然后将原始元素附加到其中。

就像是...

link: function(scope, elem, attr){
    var wrapper = angular.element('<div tooltip></div>');
    elem.before(wrapper);
    $compile(wrapper)(scope);
    wrapper.append(elem);
}

该解决方案的优势在于,通过不重新编译原始元素,使事情变得简单。

如果任何添加的指令是require任何原始元素的指令,或者原始元素具有绝对定位,则此方法将无效。

By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.