지시어에서 템플릿으로 값을 전달하는 방법은 무엇입니까?

Question

외부 템플릿이 있습니다. 속성/매개 변수/값/어떤 것이 렌더링시 템플릿에 전달되는지에 대한 사용자 지정 지시문을 만들 필요가 있습니다. 그것을하는 방법?

그것은이 같은 쉬워야한다 :

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

AngularJS와

HTML

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) 

UPDATE 내가이 문제를 해결하지만, 새로운 등장 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); 
     } 
    }; 

을});