50

我是 Angular JS 的新手，我正在尝试创建一个自定义指令，如下所示：

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

军团。控制器将是：

$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>
4

2 回答 2

97

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

指令代码的更改：

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

更改模板：

  <div linkedlist listcolumns="cashAccountsColumns"></div>
于 2013-05-20T10:20:12.897 回答
0

@AjayBeniwal 的回答是正确的，但我觉得它可以使用一些额外的解释。

正如Angular 文档指出的那样（在“隔离指令的范围”部分），该scope选项是一个对象，其中包含每个隔离范围绑定的属性。我们使用它来将指令内部的范围与外部范围分开（隔离），然后将外部范围映射到指令的内部范围。

对象的每个属性的名称scope对应于指令隔离范围属性。在问题的示例中，scope对象的唯一属性是listcolumns. 因此，在创建指令的 html 上也必须有相应的属性：

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

然而，属性的名称scope和指令的属性不需要具有相同的名称。我们可以像这样映射这两个值：

<div linkedlist short-name="cashAccountsColumns"></div>

-

controller: function ($scope) {
    $scope.cashAccountsColumns = 'value';
},
scope: {
     moreDescriptiveName: "=shortName"
},

对于属性名称与要在指令范围内绑定的值相同的情况，可以使用以下速记语法：

<div linkedlist my-name="cashAccountsColumns"></div>

-

controller: function ($scope) {
    $scope.cashAccountsColumns = 'value';
},
scope: {
     myName: "="
},


此外，在此示例中，指令属性的值必须对应于指令外部范围的属性。这是因为=in=shortName使用了从外部作用域到隔离作用域的属性的双向绑定，从而强制将指令属性的值作为表达式求值。正如这个答案雄辩地指出的那样，如果我们想要传递一个文字字符串，我们可以使用@代替=，或者用双引号和单引号包围指令的隔离范围属性：

scope: {
     moreDescriptiveName: "@"
},

或者

<div linkedlist short-name="'cashAccountsColumns'"></div>
于 2016-05-17T02:06:49.767 回答