Question

我正在使用Angular指令实现jQuery库。但我认为HTML元素与页面加载时的指令不匹配。

我一直关注Dan Wahlin的guide on how to use directives。

这是我的指令实现：

var TopicIsotope = function () {
    return {
        restrict: 'E',
        link: function (scope, element, attrs) {
            console.log("firing");
            $(element).isotope({
                itemSelector: '.grid-topic',
                masonry: {
                    // use outer width of grid-sizer for columnWidth
                    columnWidth: '.grid-topic-sizer'
                }
            });
        }
    }
}

TopicIsotope.$inject = [];

以下是我将其附加到模块的行：

.directive('topicIsotope', TopicIsotope);

以下是我尝试在HTML中调用指令的方法：

<topic-isotope>
    <div class="grid-topic-sizer"></div>
    <div class="grid-topic" ng-repeat="topic in topics">
        <p ng-bind="topic.name"></p>
    </div>
</topic-isotope>

ng-repeat正在运作。但该指令根本不起作用，我不知道如何调试，因为我在控制台中没有出错。

Answer 1

该指令似乎在link有时间呈现ng-repeat元素之前调用.grid-topic函数。
这意味着$(element).isotope()在初始化时找不到任何.grid-topic。

我在初始化.grid-topic时发现plunkr显示有isotope个元素。

说到这里，我没有一个简单的解决方案来解决你的问题也许您可以尝试使用模板作为指令。

指令不起作用。不知道如何调试

1 个答案: