如何使用＆QUOT; NG重复＆QUOT;内角JS指令的模板？ [英] How to use "ng-repeat" within template of a directive in Angular JS?

问题描述

我是新来的角JS，我试图创建一个将用作以下的自定义指令：

＆LT; D​​IV LinkedList的listcolumns ={{cashAccountsColumns}}＆GT;＆LT; / DIV＆GT;

Corrps。 控制器将是：

  $ scope.cashAccountsColumns = [
  {场：说明，称号：说明}，
  {场：主人，称号：所有者}，
  {场：currentBalance，称号：当前余额}
];
 

以及指令code 是：

  {回报
      限制：EA，
      transclude：假的，
      templateUrl：HTML / linkedlist.html'，
      范围： {
         listcolumns：@
      }，
      链接：功能（范围，元素，ATTRS）{
      }
}
 

模板是：

 ＆LT;表类=箱表WIDTH =100％＆GT;
  ＆LT;＆THEAD GT;
    ＆所述; TR＆GT;
      百分位范围=山口NG重复=列listcolumns＆GT;
        {{column.title}}
      ＆LT; /第i
    ＆LT; / TR＆GT;
  ＆LT; / THEAD＆GT;
＆LT; /表＆gt;
 

但是，这是不工作我没有得到column.title的屏幕上，而不是过多的行下面添加到DOM的值：

 百分位NG重复=列listcolumns范围=山口级=NG-范围NG结合＆GT;＆LT; /第i
 

解决方案

传递整个对象与属性将无法正常工作，你必须使用双重方式结合。只是改变从 @ 绑定到 = 并修改下面的HTML，使其工作：

修改指令code

// ...
范围： {
    listcolumns：=
}，
// ...


修改模板

＆LT; D​​IV LinkedList的listcolumns =cashAccountsColumns＆GT;＆LT; / DIV＆GT;


I'm new to Angular JS and I am trying to create a custom directive that will be used as below:

<div linkedlist listcolumns="{{cashAccountsColumns}}"></div>

Corrps. controller will be:

$scope.cashAccountsColumns = [
  {"field": "description", "title": "Description"},
  {"field": "owner", "title":"Owner"},
  {"field": "currentBalance", "title":"Current Balance" }
];

And the directive code is:

return {
      restrict : 'EA',
      transclude : false,
      templateUrl : 'html/linkedlist.html',
      scope: {
         listcolumns: "@"
      },
      link : function(scope, element, attrs) {
      }
}

template is:

<table class="box-table" width="100%">
  <thead>
    <tr>
      <th scope="col" ng-repeat="column in listcolumns">
        {{column.title}}
      </th>
    </tr>
  </thead>
</table>

But this is not working. I'm not getting the value of column.title on screen instead too many rows as below are added to DOM:

<th ng-repeat="column in listcolumns" scope="col" class="ng-scope ng-binding"></th>

解决方案

Passing an entire object with attribute will not work, you have to use dual way binding. Just change binding from @ to = and modify the HTML below to make it work:

changes to directive code:

// ...
scope: {
    listcolumns: "="
},
// ...

changes to template:

  <div linkedlist listcolumns="cashAccountsColumns"></div>

这篇关于如何使用＆QUOT; NG重复＆QUOT;内角JS指令的模板？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！