anglejsアプリでjavascriptコードをscrollspy機能用に使用する方法

Question

私はangularjs Webアプリケーションのモーダルページ内でscrollspy機能を使用しています。私はこれに従うjsfiddle。私はどこにjavascript codeをanglejsアプリに入れなければならないのですか？

私は、怒鳴るよう怒鳴るなど

/** PRODUCT IS CLICKED IN PRODUCT FINDER **/ 
    $scope.viewProductSummaryModal = function(FixRateDet) { 

     var modalInstance = $uibModal.open({ 
      templateUrl: 'assets/views/loanCalculator/modals/product-finder-modal-view.html', 
      controller: function ($scope, $uibModalInstance) { 

       $scope.cancel = function() { 
        $uibModalInstance.dismiss('cancel'); 
       }; 
      }, 

      scope : $scope, 
      windowClass: 'view-product-finder-window' 

     }); 
    }; 

HTMLコードをクリック機能で開いモーダルを持って、

<div class="modal-body no-padding-top no-padding-left no-padding-right padding-30" > 
     <div class="row"> 
      <section> 
       <!--<div class="bs-docs-example">--> 
       <div> 
        <div class="col-sm-3"> 
         <div></div> 
         <div> 
          <label class="mainLable">Home Package Plus 1 Year Fixed SPECIAL</label> 
         </div> 
         <div> 
          <button style="background: #54478E; border-radius: 2px; color: #fff2f2; height: 35px;width: 139px;">Add to favourite</button> 
         </div> 
         <div id="navbarExample1" class="col-sm-3 navbar navbar-static" style="position:relative !important;"> 
          <div class="navbar-inner"> 
           <div class="container" style="width: auto;"> 
            <a class="brand" href="#">Project Name</a> 
            <ul class="nav"> 
             <li><a href="#section1" ng-click="$event.stopPropagation()">Section 1</a></li> 
             <li><a href="#section2" ng-click="$event.stopPropagation()">Section 2</a></li> 
             <li><a href="#section3" ng-click="$event.stopPropagation()">Section 3</a></li> 
            </ul> 
           </div> 
          </div> 
         </div> 
        </div> 

        <div class="col-sm-9 scrollspy-example" data-spy="scroll" data-target="#navbarExample1" data-offset="0"> 
         <div id="section1" style="height: 435px; width: 100%; background: #F5F1F8; border-radius: 3px;"> 
          <h1>Section 1</h1> 
          <p>Try to scroll this page and look at the navigation list while scrolling!</p> 
         </div> 
         <div id="section2" style="height: 435px; width: 100%; background: #F5F1F8; border-radius: 3px;"> 
          <h1>Section 1</h1> 
          <p>Try to scroll this page and look at the navigation list while scrolling!</p> 
         </div> 
         <div id="section3" style="height: 435px; width: 100%; background: #F5F1F8; border-radius: 3px;"> 
          <h1>Section 1</h1> 
          <p>Try to scroll this page and look at the navigation list while scrolling!</p> 
         </div> 
        </div> 
       </div> 
      </section> 
     </div> 
</div> 

はどこangularjsアプリでチュートリアルのこのjavascriptのコードを配置する必要があります。

$('[data-spy="scroll"]').each(function() { 
     var $spy = $(this).scrollspy('refresh') 
     }) 
    $('#navbarExample1').scrollspy(); 

編集：このJavaScriptを適用するには、カスタマーディレクティブを作成する方法 ？

Answer 1

あなたはこのようなコードを角度の実行方法に入れてください。角度の前にJQueryがロードされていることを確認してください。

angular.module('app').run(function(){ 
    //put your code here 
}); 

Answer 2

あなたはscrollSpyは、モデル内で仕事をしたいので、modalInstance

var modalInstance = $uibModal.open({ 
    templateUrl: 'assets/views/loanCalculator/modals/product-finder-modal-view.html', 
    controller: function ($scope, $uibModalInstance) { 
     //here <<<<<<<<<<<<<<<<< 
     $('[data-spy="scroll"]').each(function() { 
      var $spy = $(this).scrollspy('refresh') 
     }) 
     $('#navbarExample1').scrollspy(); 

     $scope.cancel = function() { 
      $uibModalInstance.dismiss('cancel'); 
     }; 
    }, 
    scope : $scope, 
    windowClass: 'view-product-finder-window' 
}); 

のコントローラ機能の内部でこのコードを置きます