Question

我有外部模板。我需要创建自定义指令，该指令将具有属性/参数/值/将在其渲染时传递给模板的任何内容。怎么做？

应该很容易这样：

HTML

<table>
                <cell rownum="0"></cell>
                <cell rownum="1"></cell>
                <cell rownum="2"></cell>
                <cell rownum="3"></cell>
</table>

AngularJS

prototypeApplication.directive('cell', function() {
    return {
        restrict: 'E',
        replace: true,
        transclude: true,
        scope: { rownum:'@' },
        templateUrl: 'views/prototype/booking/templates/table-row.html'
    };
});

模板：

<tr>
<td>
    <div class="form-group first-name">
        <label>First name</label>
        <input type="text" ng-class="{'input-valid': isValidField('FirstName', persons[{{rownum}}].firstName)}"
               name="firstName" class="form-control input-name" ng-model="persons[{{rownum}}].firstName"
               ng-focus="focused('inputFirstName', {{rownum}})"  placeholder="-">
    </div>

</td>
</tr>

目前我正在接受：

Error: [$parse:syntax]  http://errors.angularjs.org/1.3.3/$parse/syntax?p0=%7B&p1=invalid%20key&p2=28&p3=focused('inputFirstName'%2C%20%7B%7Brownum%7D%7D)&p4=%7Brownum%7D%7D)

更新

当我将{{rownum}}更改为rownum时，它解决了问题但出现了新问题：

它似乎无法访问一般范围，因此ng-model不再有效。如何解决？

Answer 1

如果我为你的指令指定scope，我会记得正确，你创建了一个隔离范围，这意味着你不能再访问父范围了。您可以在不创建隔离范围的情况下获得这样的rownum：

prototypeApplication.directive('cell', function() {
  return {
      restrict: 'E',
      replace: true,
      transclude: true,
      templateUrl: 'views/prototype/booking/templates/table-row.html',
      link: function(scope, element, attrs) {
        scope.rownum = scope.$eval(attrs.rownum);
      }
  };

}）;

如何将值从指令传递给模板？

1 个答案: