javascript - 如何从 Angular 指令运行一次 jQuery 插件？

Question

我确信我想要实现的目标很简单，但在使用 Angular 两天后，我仍然陷入困境。

JS

var app = angular.module('mays', []);

app.controller('Slider', function ($scope) {
    $scope.sliderItems = [
        {
            number: 1,
            title: 'Goals',
            text: 'We did stuff and stuff'
        }
    ];
});

//A directive is what I believe I need.


//JS Plugin

app.directive('sliderDirect', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
             $('.slider').royalSlider();
        }
    };
});

我必须承认，jQuery 对我来说有点大材小用，但我很懒，想快速开始工作。

HTML/Jade

ul(class='slider royalSlider rsDefault', ng-repeat='item in sliderItems', ng-model='sliderDirect')
       li
           h1 {{item.title}}
               p {{item.text}}
               img(ng-src='/img/news/{{item.number}}.jpg')

基本上，我需要的只是在 Angular 构建了标记后运行的插件。

Answer 1

您将指令添加为属性，而不是模型:

ul(class='slider royalSlider rsDefault', ng-repeat='item in sliderItems', slider-direct)

Angular 会自动将驼峰式大小写指令转换为以下 sliderDirect -> slider-direct 以在 HTML 中使用。如果您希望指令应用于具有以下属性的元素，您还应该将 link 函数中的 element 变量作为目标:

return {
    restrict: 'A',
    link: function(scope, element, attrs) {
         $(element).royalSlider();
    }
};