지시어 속성의 중괄호 중괄호

Question

id 매개 변수를 사용하여 컨트롤러의 범위에서 배열을 가져 오는 지시문이 있는데, 이는 id가 정적 값 인 경우 제대로 작동하지만 중괄호를 사용하는 경우 (예 : 지시문은 ng-repeat를 사용하므로 각 id는 고유해야합니다. 그러나 id보다 다른 속성을 사용하더라도 여전히 작동하지 않습니다.) 그런 다음 작동하지 않습니다. 중괄호는 평가되지 않고 소스를보고 있습니다. 웹 검사기는 id=1 대신 문자 그대로 id={{index}}입니다.

편집 : 내가 뭘 하려는지 HTML에서 스택 요소가있을 때 그것은 id와 같은 이름으로 현재 범위 (지시어의 범위가 아님)에 변수를 만듭니다.

app.directive('stack', function() { 
    return { 
     restrict: 'E', 
     templateUrl: 'stack.html', 
     scope: { 
      cards: '=id', 
      name: '@id', 
      countOnly: '@' 
     }, 
     link: function(scope) { 
      scope.cards = []; 
      //because of cards: '=id', scope.cards is bound to the parentscope.<value of id attr>, so setting scope.cards to [], also creates the variable in the parent scope. 
     } 
    }; 
}); 

stack.html 템플릿은 단순히 (순간 나중에 확장 될 것이다)이 포함되어

<div class="stack">The stack called {{name}} contains {{cards.length}} cards</div> 

을 내 index.html을이이 그래서 경우 :

<stack id="deck"></stack> 
<span>There are {{deck.length}} cards in deck</span> 

결과는 다음과 같습니다.

The stack called deck contains 0 cards 
There are 0 cards in deck 

나는 갑판 배열에 카드를 추가한다면 그것은 겨 반복을 사용하지 않는 차, 후 모두 0을,) 하나에

---

위의 작품을 바꿀 것, 속성은 하드입니다. 속성 아래에는 속성이 있어야하며, 중괄호를 평가하지 않으므로이 기능은 작동하지 않습니다. 등

이

<stack ng-repeat="index in range(5)" id="slot{{index}}"></stack> 

다음 ID가 그대로 남아있다 "슬롯 {{인덱스}}"이 아닌 "슬롯 0"그러나 나는 그것이 작동하지 않는 NG가 반복 사용하여 여러 데크를 갖고 싶어

.

<stack id="slot0"></stack> 
<stack id="slot1"></stack> 
<stack id="slot2"></stack> 
<stack id="slot3"></stack> 
<stack id="slot4"></stack> 

을 나는 예상대로 작동합니다 :

나는 할 수있다.

이

<stack id="index"></stack> 

당신은 보간하지 않습니다

그것은 내가 NG 반복 사용 내부

Answer 1

(이 괄호가 포함 된 경우에만 구문 분석 어쩌면 나) cards: '=$parse(id)'을,이기 위하여 cards: '=id',을 필요로 거의 같아요 값이 아니라 값에 대한 참조입니다.

지시문에서 데이터 바인딩을 사용하여 (= 또는 @를 사용할 수 있음) 인덱스를 cards 변수에 바인드합니다. 이제 카드를 통해 액세스 할 수있는 링크 함수에 실제 색인 값이 있습니다.

정확한 문제가 포함 된 스 니펫입니다 (http://jsbin.com/iMezAFa/2/edit).

Answer 2

바인딩이 방법을

에는 괄호를 바인딩하지 하나의 방법 여기 http://jsfiddle.net/4su41a8e/2/

• 중괄호를 참조하십시오

HTML :

<div ng-app="app"> 
    <div ng-controller="firstCtrl"> 
     <stack ng-repeat="card in range" item="card" name="{{card.name}}"></stack> 
    </div> 
</div> 

DIRECTIVE :

app.directive('stack', function() { 
    return { 
     restrict: 'AE', 
     template: '<h2>cards id: {{cards.id}} </h2><p>name:{{name}}</p>', 
     scope: { 
      cards: '=item', 
      name: '@name', 
      countOnly: '@' 
     } 
    }; 
});