Angular - ng-view内のJQueryが機能しない

Question

私はAngularで新しいです、私を助けてください！

私はページを持っており、その中に私がビューに含ま：一部では

<div class="row"> 
    <div class="col-md-12"> 
     <ui-view></ui-view> 
    </div> 
</div>` 

は革命スライダーや他のstuffsのようないくつかのjqueryのプラグインは、そこに含まれます。 問題は、ui-view内のすべてのjqueryプラグインが機能しないことです。

理由を調べたところ、jqueryライブラリがAngularのものよりも前に含まれていなければならないことを知っていましたが、変更はありませんでした。

すべてのjqueryスクリプトを正しく実行するにはどうすればよいですか？

Answer 1

これは、使用しているすべてのjQueryプラグインが、ページが読み込まれるとすぐに開始しようとするためです。しかし、Angularはそのあとにしばらくして<ng-view/>を埋め込みます。解決策はプラグインを手動で開始することです。そのための角度の道は、それぞれの '特別な'要素のためのあなた自身の指示を作成し、対応するjQueryをそれに適用することですlink関数です。

app.directive('calendar', function(){ 

    return { 
     template: '<div class="calendar"></div>', 
     link: function(scope, el, attrs, ctrl){ 

      $(el).makeCalendar(); 
     } 
    } 
}) 

この方法で、あなたはカレンダーを作成することができHTMLで<calendar></calendar>を使用することができます。たとえば、カレンダーを使用することができます。

EDIT

は、あなたの答えをありがとう、多分私は理解していなかった...例えば

、document.readyに私はこれを行う：

$doc.ready(function() { 
    var $sliderRange = $('#slider-range'); 
    var $amount = $('#amount'); 
    if ($sliderRange.length) { 
    // apply range slider 
    $sliderRange.slider({ 
     range: true, 
     min: 0, 
     max: 3000, 
     values: [0, 2600], 
     slide: function(event, ui) { 
     $amount.val('€' + ui.values[0] + ' - €' + ui.values[1]); 
    } 
    }); 
    $amount.val('€' + $sliderRange.slider('values', 0) + ' - €' + 
    $sliderRange.slider('values', 1)); 
    } 
}); 

どのように私ができますディレクティブでこれを行いますか？

例：

<slider value="sliderValue"></slider> 
<p>Result: €{{sliderValue[0]}} - € {{sliderValue[1]}}</p> 

をそして、あなたはそのようなオプション変更することができる：

app.directive('slider', function(){ 

    var defaults = { 
     range: true, 
     min: 0, 
     max: 3000, 
     values: [0, 2600], 
    }; 

    return { 
     template: '<div></div>', 
     replace: true, 
     scope: { 
      options: '=', 
      value: '=' 
     }, 
     link: function(scope, el, attrs, ctrl){ 

      // merge options with defaults 
      var opts = ng.extend({}, defaults, scope.options); 

      // set initial value 
      opts.values = scope.value = scope.value || [0, 0]; 

      // watch for changes and update the scope's value 
      opts.slide = function(event, ui){ 
       scope.value = ui.values; 
       scope.$apply(); 
      }; 

      // apply the jquery plugin with the options 
      $(el).slider(opts); 
     } 
    } 
}) 

今、あなたがそのようにそれを使用

<slider value="sliderValue" options="{max: 100}"></slider> 

を