사용자 정의 지시문 내에서 ng-repeat

StackOverflow https://stackoverflow.com//questions/24021610

문제

그래서 범위를 내 사용자 지정 지시문에 전달하는 데 어려움을 겪고 있습니다.

여기 내 HTML이 있습니다

<li ng-repeat="post in posts | filter:search | orderBy:sortField:reverse" class="archives-listing" ng-class="{'last-border':$last}">

    <archive-notes></archive-notes>


</li>

내 지시사항은 다음과 같습니다.

app.directive('archiveNotes', function(){
return {
    restrict: 'E',
    transclude: true,
    scope: {
        notes: '@',
        paths: '@'
    },
    controller: function($scope) {

    },
    templateUrl: '/wp-content/themes/twentythirteen/js/angular/templates/notes.html'
}
})
app.directive('archiveFolders', function(){
return {
    require: '^archiveNotes',
    restrict: 'E',
    transclude: true,
    scope: {
        path: '@'
    },
    link: function(scope, element, attrs) {

    },
    templateUrl: '/wp-content/themes/twentythirteen/js/angular/templates/folders.html'
}
});

여기 내 템플릿이 있습니다.

notes.html
<div ng-class="{'found' : find(post.paths[$index], search)}" class="arch-notes">
    <div ng-bind-html="is_NotesEmpty(post.notes)">{{post.notes}}</div>
    <archive-folders></archive-folders>
</div>

folders.html
<div ng-repeat="path in post.paths | filter:search track by $index" ng-transclude>
    <span class="arch-paths">{{path}}</span>
</div>

여러 가지를 비워두었어요 i.e controller and link 왜냐하면 이 시점에서 나는 DOM 조작을 시작하기 전에 먼저 모든 것을 표시하는 방법을 찾으려고 했기 때문입니다.

나는angularjs 문서의 예를 따랐고 여기까지 왔습니다.범위에 액세스하는 방법을 알아낼 수 없는 것 같나요?

도움을 주시면 감사하겠습니다.

도움이 되었습니까?

해결책

귀하의 템플릿에 따르면 archiveNotes 지시어 정의는 실제로 다음과 같아야 합니다:

app.directive('archiveNotes', function(){
return {
    ...
    scope: {
        post: '='
    },
    ...
}
})

얻으려면 post 에서 전달된 변수 ng-repeat의 범위에 대해서는 다음도 설정해야 합니다. post 지시어 요소의 속성:

<archive-notes post="post"></archive-notes>

마찬가지로, 하위 지시문에도 이를 설정해야 합니다.

app.directive('archiveFolders', function(){
return {
    ...
    scope: {
        post: '='
    },
    ...
}
});

...그리고 당신의 변경 notes.html 주형:

<archive-folders post="post"></archive-folders>

격리 범위는 일종의 방화벽과 유사하며 이 경우 특정 범위 변수에 대해 예외를 설정할 수 있습니다.여기서 하는 일은 지시문 정의에서 해당 예외를 설정한 다음 요소의 속성을 사용하여 전달하는 것뿐입니다.

John Lindquist의 다음 비디오는 격리 범위에 대해 실제로 약간의 정보를 제공합니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top