如何從Angular指令運行一次jQuery插件？

我相信我想要實現的很容易，但花了2天與Angular我仍然卡住。如何從Angular指令運行一次jQuery插件？

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插件。

來源

2014-09-24 Jamie Hutber

現實則應該做'$（元素）.royalSlider（）'。你告訴我們你有什麼，但你沒有告訴我們它是什麼或不在做什麼。它有什麼問題？它在做什麼或不做什麼？ – 2014-09-24 15:52:38

你正在聲明'sliderDirect'指令，但是你沒有使用你顯示的HTML？ – Stryner 2014-09-24 15:53:31

我認爲op試圖用'ng-model ='sliderDirect''（當然這是錯誤的） – 2014-09-24 15:54:29

您添加指令作爲一個屬性，而不是一個模式：

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

角度會自動駱駝指令轉換成以下sliderDirect - >slider-direct在HTML中使用。你也應該把目標定在link功能element變量，如果你想該指令適用於元素與屬性：

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

來源

2014-09-24 16:07:20 tymeJV

事實上，我讀到了有關自動轉換的內容，有趣的是我完全沒有應用這種邏輯！ – 2014-09-24 16:26:28

如何從Angular指令運行一次jQuery插件？

回答

相關問題