AngularJS:嵌套指令中的对象未定义? [英] AngularJS: Objects inside nested directives getting undefined?
问题描述
所以,我有两个指令,一个包含一个模板文件,其中包含另一个相同类型的指令.
第一个指令看起来像:
.directive('billInfo', function () {返回 {//范围:真,范围: {对象:'='},限制:'E',templateUrl: 'views/templates/bill-info.html',链接:函数(范围、元素、属性){scope.status = scope.obj.getStatus();scope.bill = scope.obj;}}})
模板非常简单,比如;
<span class="glyphicon glyphicon-cutlery">{{bill.getTable()}}</span><small><span class="time"></span></small><div class="btn-group bill-btn"><bill-btns billobj="bill"></bill-btns>
billBtns 的指令如下所示:
.directive('billBtns', function () {返回 {范围: {账单对象:'='},限制:'E',模板:'<div><div>koko{{status}}</div></div>',链接:函数(范围、元素、属性){控制台日志(范围,范围.billobj);scope.status = scope.billobj.getStatus();}}})
问题出乎意料:scope.billobj 结果是未定义的.当我从 billBtns 指令的链接函数中控制台日志 scope 时,一切似乎都没有问题:我可以在范围内看到 billobj.
这里发生了什么?我在这里做错了什么吗?
billInfo 模板
<div draggable ng-repeat="(index, bill) in getEnq()" bill="bill" id="bill-{{bill.orderCode}}" class="container panel panel-默认帐单浮动-{{index%2}}" style="width:300px;"data-created="{{bill.getCreatedOn()}}"><bill-info obj="bill"></bill-info>
我相信我已经找到了解决方案,但我不确定这是否是正确的做法.新的 billBtns 指令如下所示:
.directive('billBtns', function () {返回 {限制:'E',模板:'<div><div>koko{{status}}</div></div>',链接:函数(范围、元素、属性){控制台日志(范围,范围.$parent.obj);scope.status = scope.$parent.bill.getStatus();}}})
这就解决了问题.我的怀疑是这样的,如果我们再次查看 billInfo 指令,我会执行以下操作:
scope.bill = scope.obj;//哇?
我想更多地了解为什么会发生这种情况,以及为什么我可以从嵌套指令访问 scope.$parent.bill 而不是 scope.$parent.obj 而不会出现类型错误.或者这只是级联作用域的方式.
So, I have two directives, one that has a template file, which contains another directive of the same type.
The first directive looks like:
.directive('billInfo', function () {
return {
// scope: true,
scope: {
obj: '='
},
restrict: 'E',
templateUrl: 'views/templates/bill-info.html',
link: function (scope, element, attrs) {
scope.status = scope.obj.getStatus();
scope.bill = scope.obj;
}
}
})
And the template is pretty simple, something like;
<h4>
<span class="glyphicon glyphicon-cutlery">
{{bill.getTable()}}
</span>
<small><span class="time"></span></small>
<div class="btn-group bill-btn">
<bill-btns billobj="bill"></bill-btns>
</div>
</h4>
The directive for billBtns looks like:
.directive('billBtns', function () {
return {
scope: {
billobj: '='
},
restrict: 'E',
template: '<div><div>koko{{status}}</div></div>',
link: function (scope, element, attrs) {
console.log(scope, scope.billobj);
scope.status = scope.billobj.getStatus();
}
}
})
The problem is unexpected: scope.billobj turns out to be undefined. When I console log scope from within the link function of the billBtns directive, all seems ok: I can see billobj inside scope.
What is going on here? Am I doing something fundamentally wrong here?
EDIT: Template for billInfo
<div draggable ng-repeat="(index, bill) in getEnq()" bill="bill" id="bill-{{bill.orderCode}}" class="container panel panel-default bill float-{{index%2}}" style="width:300px;" data-created="{{bill.getCreatedOn()}}">
<bill-info obj="bill"></bill-info>
</div>
I believe I've come to a solution, but I'm uncertain as to if this is the right practice. Here's what the new billBtns directive looks like:
.directive('billBtns', function () {
return {
restrict: 'E',
template: '<div><div>koko{{status}}</div></div>',
link: function (scope, element, attrs) {
console.log(scope, scope.$parent.obj);
scope.status = scope.$parent.bill.getStatus();
}
}
})
And that solves the problem. My suspicion is this, if we look at the billInfo directive again, I do something like:
scope.bill = scope.obj; // woah?
I'd like to understand more about why this happens and why I can access scope.$parent.bill from a nested directive but not scope.$parent.obj without getting typeerrors. Or maybe thats just the way to cascade scopes.
这篇关于AngularJS:嵌套指令中的对象未定义?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!