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>

Изолировать область действия — это что-то вроде брандмауэра, где вы можете устанавливать исключения, в данном случае для определенных переменных области.Все, что мы здесь делаем, — это устанавливаем эти исключения в определениях директив, а затем передаем их, используя атрибут элементов.

Эти видео Джона Линдквиста действительно пролили для меня некоторый свет на изолирующий прицел:

Лицензировано под: CC-BY-SA с атрибуция
Не связан с StackOverflow
scroll top