我首先尝试使用AngularJS自定义指令。
我在指令的link函数中使用(或理解......)隔离范围时遇到了麻烦。
以下是我的应用程序的这部分代码:
view.html
...
<raw-data id="request-data" title="XML of the request" data="request">See the request</raw-data>
...
request
是在viewCtrl范围内发布的变量,它包含请求的xml字符串。
rawData.js
directives.directive('rawData', function() {
return {
restrict : 'E',
templateUrl : 'partials/directives/raw-data.html',
replace : true,
transclude : true,
scope : {
id : '@',
title : '@',
data : '='
},
link : function($scope, $elem, $attr) {
console.log($scope.data); //the data is correclty printed
console.log($scope.id); //undefined
}
};
});
原始data.html
<div>
<!-- Button to trigger modal -->
<a href="#{{id}}Modal" role="button" class="btn" data-toggle="modal" ng-transclude></a>
<!-- Modal -->
<div id="{{id}}Modal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="{{id}}Modal" aria-hidden="true">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h3 id="myModalLabel">{{ title }}</h3>
</div>
<div class="modal-body">
<textarea class="input-block-level" rows="10">{{ data }}</textarea>
</div>
<div class="modal-footer">
<!-- <button class="btn" ng-click="toggleTagText('')">{{'cacher'}} l'image</button> -->
<button class="btn btn-primary" data-dismiss="modal" aria-hidden="true">Fermer</button>
</div>
</div>
</div>
我不明白为什么当模式弹出时ID显示为correclty,但是当我尝试console.log()
时,它的值是未定义的。
也许我对孤立的范围值(=
和@
)错了。
感谢您的阅读。 :)
答案 0 :(得分:35)
与@
绑定的隔离范围属性在链接功能中不会立即可用。您需要使用$observe
:
$attr.$observe('id', function(value) {
console.log(value);
});
您的模板正常运行,因为Angular会自动为您更新隔离范围属性id
。当它确实更新时,您的模板也会自动更新。
如果您只是传递字符串,则只需评估一次而不是使用@
绑定:
link: function($scope, $elem, $attr) {
var id = $attr.id;
var title = $attr.title
console.log(id, title);
}
但是,在您的情况下,由于您要使用模板中的属性,因此应使用@
。
如果您没有使用模板,那么当属性值包含@
时,{{}}
非常有用 - 例如title="{{myTitle}}"
。然后,使用$observe
的需求变得更加明显:每次myTitle
的值发生变化时,您的链接功能都可能需要执行某些操作。
答案 1 :(得分:10)
这是故意的,与编辑顺序以及'@'和'='之间的区别有关。
this Google Groups discussion with input from Misko的一些摘录:
@和=做很多不同的事情。一个复制属性值 (可以插值),另一个处理属性值 作为表达。
@attrs直到稍后才进行$插值,因此它们不可用于 链接时间。如果你想在链接功能中对它们做些什么 你需要自己手动插值
答案 2 :(得分:0)
好吧,上面的答案都没有提到一个关键方面,即使使用'=',我似乎也不能直接访问链接函数中的范围,如下所示,
scope: {
data: '=',
},
link: function(scope, elem, attrs) {
console.debug(scope.data); // undefined
但您可以访问内部函数中的范围
link: function(scope, elem, attrs) {
scope.saveComment = function() {
console.debug(scope.data);
所以在我看来,当scope.data可用时可能存在时滞。
答案 3 :(得分:0)
您可以访问我在这里创建的JSFiddle:http://jsfiddle.net/7t984sf9/5/:
link: function($scope, $elem, $attr) {
console.log($scope.onewayObject);
$attr.$observe('onewayObject', function(value) {
console.log(value);
});
}
或者更详细的说明:What is the difference between & vs @ and = in angularJS