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 /玉

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构建markup后运行的插件。

Answer 1

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

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

Angular会自动将驼峰案例指令转换为以下sliderDirect - ＆gt; slider-direct用于HTML。如果您希望将指令应用于具有属性的元素，您还应该定位element函数中的link变量：

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

如何从Angular Directive运行一次jQuery插件？

1 个答案: