javascript - Angular Directive(指令)和同位素

Question

我正在学习 Angular 并尝试将其与 Isotope.js 一起使用.但是我无法让它工作。这是我的代码(也在这个 jsFiddle 上):

<div ng-controller="MainCtrl">
    <note></note>
</div>

var app = angular.module('app', []);
app.directive('note', function () {
    return {
        template: '<div class="note" ng-repeat="note in notes">{{note.content}}</div>',
        restrict: 'E',
        link: function (scope, element, attrs) {
            var notes = document.getElementsByClassName("note");
            console.log("notes in DOM: ", notes);
            var iso = new Isotope(element[0], {
                itemSelector: '.note',
                layoutMode: 'masonry'
            });
            console.log(iso.items);
        }
    };
});
app.controller('MainCtrl', function ($scope) {
    $scope.notes = [{
        "content": "Hello World!"
    }, {
        "content": "Lorem ipsum dolor sit amet."
    }];
});

为什么 isotope 的元素数组为空 (console.log(iso.items); 显示“[]”)？看起来它找不到它们(使用选择器“.note”)，但它们已经附加到 DOM(查看 console.log("notes in DOM: ", notes);) .

Answer 1

它只是在编译后运行，你可以看到一个简单的 $timeout 加载它

在 fiddle 中

$timeout(function () {
    var iso = new Isotope(element[0], {
        itemSelector: '.note',
        layoutMode: 'masonry'
     });
},0);

可能有更好的解决方案，但它真的只能等到它出现。