javascript - How to pass value from directive to template? -

i have external template. need create custom directive have attribute/parameter/value/whatever passed template upon it's render. how it?

it should easy 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 moment 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 changed {{rownum}} rownum solved problem new 1 appeared:

it seems cannot access general scope ng-model no longer works. how fix it?

if remember correctly if specify scope directive create isolated-scope means can no longer access parent scope. rownum without creating 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);       }   }; 

});