我有这个指令:
hpDsat.directive('ngElementReady', [function() {
return {
restrict: "A",
link: function($scope, $element, $attributes) {
// put watches here.
console.log(" WHAT THE @#%*%$??? ");
$scope.$eval($attributes.ngElementReady);
}
};
}]);
我从没有看到的输出console.log
。我在声明一个像这样的元素:
<div data-ng-element-ready="console.log(' ------------------------------- COMPILED! ')" data-ng-if="analysis.type" data-ng-show="showBasicHtml" data-ng-include="analysis.type+'Content.html'"></div>
是的,我在声明div
元素所在的控制器之前先声明指令。出现该元素,ngShow和ngInclude起作用,并且加载的模板中的任何内容也都可以正常工作(更多指令,控制器,{{expressions}}等)。
如果我使用编译功能执行它,则编译功能可以工作,但仍然不能执行链接功能:
hpDsat.directive('ngElementReady', [function() {
return {
restrict: "A",
compile: function($element, $attributes) {
console.log("This I do see."); // THIS WORKS!!
return function($scope) {
// put watches here.
console.log("But not this. Why???"); // DOESN'T WORK!!
$scope.$eval($attributes.ngElementReady);
};
}
};
}]);
编译功能的console.log可以正常工作,但是返回的链接功能仍然永远不会执行。
知道为什么链接功能可能不会被触发吗?
该错误可能在其他地方。我在jsfiddle中尝试过,第一个版本有效。
eval()
无论如何,您可能会误解什么$scope.$eval()
:
$scope.$eval()
根据范围评估angularjs代码。eval()
在angularjs中运行任意js代码的JavaScript函数为$window.eval()
。有关此内容的更多信息:Angular.js:$ eval如何工作,为什么与香草eval不同?
我测试了与控制器隔离的指令:
<div data-ng-element-ready="console.log('COMPILED!')"></div>
和指令:
app.directive('ngElementReady', ['$window', function($window) {
return {
restrict: "A",
link: function($scope, $element, $attributes) {
console.log("Reached the link fn", $attributes);
$window.eval($attributes.ngElementReady);
}
};
}]);
我确实得到了“到达链接fn”的值,并且$attributes
是正确的:
Reached the link fn Object { $$element={...}, $attr={...},
ngElementReady="console.log('COMPILED!')", more...}
并$window.eval()
返回COMPILED!
并在这里与控制器。
在任何情况下,eval()
用于执行写在属性中的代码都是很危险的。任何人都可以修改DOM以在其中运行代码。至少确保它不会影响任何其他用户或服务器端。
重现ng-if问题
在第一个评论后进行编辑:我试图在此处使ng-if表达式的值为false这次它不显示该消息。这可能是因为要评估ng-if,您必须先编译指令。否则,仅仅是anuglarjs不知道的代码。但是,由于已将其从DOM中删除,因此它永远不会到达链接功能。
AngularJS函数的执行顺序
通常,执行顺序是这样的(乔什·大卫·米勒(Josh David Miller)解释说:
<div directive1>
<div directive2>
<!-- ... -->
</div>
</div>
现在,AngularJS将通过以一定顺序运行指令函数来创建指令:
directive1: compile
directive2: compile
directive1: controller
directive1: pre-link
directive2: controller
directive2: pre-link
directive2: post-link
directive1: post-link
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句