angularjs에서 중첩 된 지시문을 반복합니다.

저는 새롭고 중첩 된 일부 지시어를하려고했지만 몇 가지 문제가 있습니다.angularjs에서 중첩 된 지시문을 반복합니다.

module.controller("TimelineController", ["$scope", "$compile", function ($scope, $compile) { 

    $scope.text = "ohoh"; 
    $scope.elements = ["12", "13"]; 

    console.log("Timeline Controller", arguments); 

}]); 

module.directive('timeline', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: true, 
     controller : "TimelineController", 
     link: function(scope, element, attrs, controller) { 
      console.log("linking timeline", arguments); 
     }, 
     templateUrl:'templates/directives/timeline.html', 
     replace: true 
    }; 
}); 

module.directive('timelineEvent', function() { 
    return { 
     restrict: 'E', 
     transclude: true, 
     scope: true, 
     // controller : "TimelineController", 
     link: function(scope, element, attrs/*, controller*/) { 
      console.log("linking element", arguments); 
     }, 
     templateUrl:'templates/directives/timeline_element.html', 
     replace: false 
    }; 
});

내 템플릿 : 여기

내 코드입니다

timeline.html :

<div class="timeline"> 
    <p> 
     timeline {{text}} 
    </p> 

    <div ng-repeat="element in elements"> 
     - event {{element }} 
     <timeline-event ng-model="{{element}}"/> 
    </div> 

</div>

timeline_element.html :

<div class="element"> 
    timeline element o/ \o 
</div>

내 index.html을 :

[...] 
<body> 

    <timeline></timeline> 

</body>

그리고 예상치 못한 결과 : 예상 결과는 물론 것

timeline ohoh 

- event 12 
- event 13 
timeline element o/ \o

timeline ohoh 

- event 12 
timeline element o/ \o 
- event 13 
timeline element o/ \o

이 왜 성공적으로 실행 NG가 반복,하지만 중첩 된 지침 호출은 실행 일단? 루프에서 지시문을 사용할 수 없습니까?

출처

2013-01-09 Pierre Gayvallet

세 가지 발언. 이러한 원인 경우 나도 몰라 (즉에 대한 jsFiddle에서 테스트 필요),하지만 그들은 확실히 뭔가를 깨고있다 : 당신이 transclude: true을 설정하는 이유는

를? 템플릿에 ng-transclude을 사용하지 마십시오. transclude: true은 필요하지 않습니다.
당신의 timeline에 ng-model는 element 대신 당신은 새 범위가 생성된다는 것을 의미합니다 scope: true를 사용하는 {{element}}
해야한다. 아마도 (두 지시어 모두에서) scope을 정의해야 할 것입니다.

따라서 :

scope: { 
    element: '&' // provides a way to execute an expression in the context of the parent scope. 
}

출처

2013-01-09 18:09:14 asgoth

워킹 [바이올린 (

에

<div ng-controlle="TimelineControllerCtrl">

에 다음 라인을 변경해주십시오 http://jsfiddle.net/mrajcok/fKbtt /). 새로운 범위를 만들 필요가 없다는 것을 제외하고는 제안한 바를 따르기 때문에'scope :'행은 주석 처리됩니다. –

이 예는 "ng-controlle"이라는 오타가 있지만, 그것 없이는 끊어집니다. – iamwhitebox

정말 이상합니다. 컨트롤러를 바인드하면 작동하지 않습니다. WTF !? – schlingel

@ 마크가 Rajcok

<div ng-controller="TimelineController">

출처

2015-09-24 10:25:34 Fachher

angularjs에서 중첩 된 지시문을 반복합니다.

답변

관련 문제