angularjs – 如何在Angular JS中的指令的模板中使用“ng-repeat

发布时间：2020-12-17 09:02:20 所属栏目：安全来源：网络整理

导读：我是新的Angular JS和我试图创建一个自定义指令，将使用如下： div linkedlist listcolumns =“{{cashAccountsColumns}}” / div Corrps。控制器将： $scope.cashAccountsColumns = [ {"field": "description","title": "Description"},{"field": "owner","t

我是新的Angular JS和我试图创建一个自定义指令，将使用如下：

< div linkedlist listcolumns =“{{cashAccountsColumns}}”>< / div>

Corrps。控制器将：

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

指令代码是：

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

模板是：

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

但这不工作。我没有得到column.title的值在屏幕上，太多的行如下被添加到DOM：

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

传递具有属性的整个对象将不起作用，您必须使用双向绑定。只需将绑定从@更改为=，并修改下面的HTML使其工作：

更改指令代码：

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

对模板的更改：

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

（编辑：李大同）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!