AngularJS：嵌套指令内部对象入门未定义？ [英] AngularJS: Objects inside nested directives getting undefined?

问题描述

所以，我有两个指令，一个有一个模板文件，它包含相同类型的其他指令。

第一个指令是这样的：

  .directive（'billInfo'，函数（）{
    返回{
        //范围：真实，
        范围： {
            OBJ：'='
        }，
        限制：'E'，
        templateUrl：意见/模板/账单info.html里'，
        链接：功能（范围，元素，ATTRS）{
            scope.status = scope.obj.getStatus（）;
            scope.bill = scope.obj;
        }
    }
}）
 

和模板是pretty简单，类似;

 ＆LT; H4＆GT;
  ＆LT;跨度类=glyphicon glyphicon-餐具＆GT;
    {{bill.getTable（）}}
  ＆LT; / SPAN＆GT;
  ＆LT;小＆GT;＆LT;跨度类=时间＆GT;＆LT; / SPAN＆GT;＆LT; /小＆GT;
  ＆LT; D​​IV CLASS =BTN-组账单BTN＆GT;
      ＆LT;账单btns billobj =法案＆GT;＆LT; /账单btns＆GT;
  ＆LT; / DIV＆GT;
＆LT; / H4＆GT;
 

有关billBtns该指令如下：

  .directive（'billBtns'，函数（）{
    返回{
        范围： {
            billobj：'='
        }，
        限制：'E'，
        模板：'＆LT; D​​IV＆GT;＆LT; D​​IV＆GT; KOKO {{}状态}＆LT; / DIV＆GT;＆LT; / DIV＆GT;，
        链接：功能（范围，元素，ATTRS）{
            的console.log（范围，scope.billobj）;
            scope.status = scope.billobj.getStatus（）;
        }
    }
}）
 

问题是意外：scope.billobj真可谓是不确定的。当我控制台日志的范围的从billBtns指令的链接功能中，都似乎确定。我可以看到里面billobj范围

这是怎么回事？我在做某种根本性错误在这里？

编辑：模板billInfo

 ＆LT; D​​IV拖动NG重复=在getEnq（索引，票据）（）法案=法案ID =比尔 -  {{bill.order code }}级=集装箱面板面板默认法案浮 -  {{索引％2}的风格=宽度：300像素;数据创建={{bill.getCreatedOn（）}}＆GT;
    ＆LT;账单信息的obj =法案＆GT;＆LT; /账单信息＆gt;
  ＆LT; / DIV＆GT;
 

解决方案

我相信我已经到了一个解决方案，但我不确定如果到这是正确的做法。这里是新billBtns指令的样子：

  .directive（'billBtns'，函数（）{
    返回{
        限制：'E'，
        模板：'＆LT; D​​IV＆GT;＆LT; D​​IV＆GT; KOKO {{}状态}＆LT; / DIV＆GT;＆LT; / DIV＆GT;，
        链接：功能（范围，元素，ATTRS）{
            的console.log（范围，范围$ parent.obj）;
            。scope.status = $范围parent.bill.getStatus（）;
        }
    }
}）
 

和解决该问题。我怀疑这一点，如果我们看一下billInfo指令再次，我做这样的事情：

  scope.bill = scope.obj; //哇？
 

我想更多地了解为什么会这样，为什么我可以从一个嵌套的指令，而不是范围。$ parent.obj访问范围。$ parent.bill没有得到typeerrors。或者，也许那只是方式级联范围。

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屋！