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

Question

I have external template. I need to create custom directive which will have attribute/parameter/value/whatever which will be passed to template upon it's render. How to do it?

It should be easy like this:

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'
    };
});

Template:

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

At the moment I am getting :

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)

UPDATE

When I changed {{rownum}} to rownum it solved problem but new one appeared:

It seems that it cannot access general scope so ng-model is no longer works. How to fix it?

Answer 1

If I remember correctly if you specify a scope for your directive you create an isolated-scope which means that you can no longer access the parent scope. You could get the rownum like this without creating an isolated-scope:

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);
      }
  };

});