Question

我有以下

compile : function($scope, $element, $attrs, parentCtrl) {
    return {
        pre : function($scope, $element, $attrs, parentCtrl) {
            if($scope.feature == 'drop') {
                $element.find('.playlist').attr('droppable', true);
            }
        },
        post : function($scope, $element, $attrs, parentCtrl) {
            $scope.$parent.$watch('chosen', function(newAsset) {
                if(typeof newAsset != 'undefined' && newAsset.hasOwnProperty('id')) {
                    $scope.list.resource = newAsset.id;
                    $scope.list.loadData();
                }
            });
            }
        }
    }

现在....'droppable'是一个指令。但从我所看到的 - 它没有被处理/编译。如果在'compile-pre'中以dymanically方式添加它应该由Angular编译吗？

我应该如何处理动态生成的指令？

Answer 1

添加新属性或类名不会在编译步骤本身中重新触发AngularJS中的新编译。

一种工作方法是使用terminal: true，选择高优先级，在链接中添加新属性，然后再次使用优先级限制编译元素。

所以，我们有：

<my-directive></my-directive>

我们的指令定义如下：

.directive('myDirective', ['$compile', function($compile) { return {
    priority: 1000,
    terminal: true,
    link: function(scope, element) {
        if (scope.feature) { 
           element.attr('droppable', true);
        }
        $compile($element, null, 1000)(scope);
    }
}}]);

它的作用：

如果你让'droppable'指令的默认优先级为0，那么我们说priority: 1000我们应该首先加载这个指令（1000非常高）。
使用terminal: true我们说angular会跳过该元素之后的所有指令（都具有较低的优先级）。
在link中，我们动态地将新属性添加到当前元素，然后在下一个$ compile步骤中触发新指令。
使用$compile(element, transclude, maxPriority);，它会再次编译当前元素，但仅限于具有优先级＆lt; 1000，这意味着它不包括我们的myDirective指令并重新搜索并应用包含我们新添加的指令的所有指令。

请点击https://docs.angularjs.org/api/ng/service/ $ compile＃-multielement-了解更多信息。它应该直接跳转到priority属性（尽管锚被称为错误，但angular的doc站点是......不同的。）

AngularJS动态添加了指令

1 个答案: