在 AngularJS 的指令中添加指令

我正在尝试构建一个指令，负责在它声明的元素上 添加更多指令。 例如，我想构建一个指令，负责添加datepicker， datepicker-language和ng-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元素中，正如预期的那样，编译运行了两次，这意味着预期的__abc1数量是预期的两倍。

110082 次浏览
小开

尝试将状态存储在元素本身的属性中，例如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);


}


}
};
});

我希望这对你有所帮助。

小开
最佳答案
在一个DOM元素上有多个指令的情况下 它们的应用顺序很重要，你可以使用priority属性对它们进行排序 应用程序。较大的数字先运行。如果不指定优先级，则默认优先级为0

经过讨论，这里是完整的工作解决方案。键是删除属性: element.removeAttr("common-things");，还有element.removeAttr("data-common-things");(以防用户在html中指定data-common-things)

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);
}
};
});

< a href = " http://plnkr.co/edit/Tw1Pbt?p =预览”rel = " noreferrer "演示> < / >

解释为什么我们必须设置terminal: true和priority: 1000(一个高的数字):

当DOM准备就绪时，angular会遍历DOM以识别所有已注册的指令，并基于priority 如果这些指令在同一个元素上逐一编译这些指令。我们将自定义指令的优先级设置为一个较高的数字，以确保它将被编译为第一个，并且与terminal: true一起，其他指令将在该指令编译后被编译为跳过。

当我们的自定义指令被编译时，它将通过添加指令和删除自身来修改元素，并使用$compile service来编译所有指令(包括那些被跳过的指令)。

如果我们不设置terminal:true和priority: 1000，有可能一些指令被编译为之前我们的自定义指令。当我们的自定义指令使用$compile编译element =>时，再次编译已经编译过的指令。这将导致不可预测的行为，特别是如果在自定义指令之前编译的指令已经转换了DOM。

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

同样修改模板的指令的一个例子是ng-repeat(优先级= 1000)，当ng-repeat被编译时，ng-repeat 在应用其他指令之前复制模板元素. 0被编译。

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

小开

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

在编译过程中，Angular会在编译前拉入模板值，所以你可以在那里附加任何进一步的指令，Angular会帮你处理。

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

希望有帮助，如果有什么不清楚的地方请告诉我

亚历克斯

小开

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

该指令接受一个对象数组，每个对象包含要添加的指令的名称和要传递给它的值(如果有的话)。

我一直在努力思考这样一个指令的用例，直到我想到它可能会有用，添加一些条件逻辑，只添加一个基于某些条件的指令(尽管下面的答案仍然是人为的)。我添加了一个可选的if属性，它应该包含一个bool值、表达式或函数(例如，在你的控制器中定义)，来决定是否应该添加该指令。

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

< a href = " http://plnkr.co/edit/f28p1z?p=preview" rel="nofollow">Plunker Demo . p=preview" rel="nofollow">Plunker Demo . p=preview

. 
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>

小开

我想加上我的解决方案，因为被接受的解决方案不太适合我。

我需要添加一个指令，但也要保持我的指令在元素上。

在这个例子中，我给元素添加了一个简单的ng风格的指令。为了防止无限编译循环，并允许我保留我的指令，我添加了一个检查，看看我添加的东西是否在重新编译元素之前存在。

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);
}
}
};
}
};
}]);
小开

这是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();
}
}

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

小开

在某些情况下可以工作的一个简单解决方案是创建并$compile一个包装器，然后将原始元素附加到它。

之类的……

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

这种解决方案的优点是不需要重新编译原始元素，从而使事情变得简单。

如果添加的任何指令的require或原始元素的任何指令，或原始元素具有绝对定位，则这将不起作用。


提交答案