AngularJSディレクティブのファイルからJavaScriptコードを実行しています

Question

すべてのページにロードするウェブサイトのフッターセクションに対して、AngularJSのディレクティブを作成しました。内部では、ページがロードされた後に実行する必要のあるjQueryコードをいくつか追加しました。これは、そのことを考えるための唯一の解決策でした。ここではそれがどのように見えるかの例を示します。

app.directive('footer', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     scope: {user: '='}, 
     templateUrl: "PATH_TO_HTML_FILE", 
     controller: ['$scope', '$filter', function ($scope, $filter) { 
      // Some random jQuery goes here, for example: 
      $('.search-nav > a').on('click', function(){ 
       $('.search-drop-down').slideDown(); 
      }); 

      // Close Search form 
      function closeSearchField() { 
       $('.search-drop-down').slideUp(); 
      } 
     }] 
    }; 
}); 

私はそれを行うための最善の方法だかはわからないが、私は今、やりたいことは、別のファイルにコントローラで、このjQueryのコードを取得することです。その理由：私たちが扱っているフロントエンドの人は、AngularJSがディレクティブなどについて言及していないことを知らないので、ページロード時に実行されるすべてのjQueryコードで別々のファイルを作成したい場合、必要です。ディレクティブ自体が読み込まれると、私はちょうどファイルのcontectを取得し、上のコントローラの本体で実行したいと思います。どのようにそれを行う上の任意のアイデアですか？あるいは、全体の問題に対するより良い解決策ですか？

Answer 1

あなたは別のファイルでコントローラを定義し、名前だけでディレクティブでそれを参照することができます。

app.directive('footer', function() { 
    return { 
     restrict: 'A', 
     replace: true, 
     scope: {user: '='}, 
     templateUrl: "PATH_TO_HTML_FILE", 
     controller: 'footerCtrl' 
}); 

ます。また、取得することができます

コントローラ

app.controller('footerCtrl', footerCtrl); 

//You are not actually using it in the controller, so you can remove it if you don't need it 
footerCtrl.$inject = ['$scope', '$filter']; 

function footerCtrl($scope, $filter){ 
    // Some random jQuery goes here, for example: 
      $('.search-nav > a').on('click', function(){ 
       $('.search-drop-down').slideDown(); 
      }); 

      // Close Search form 
      function closeSearchField() { 
       $('.search-drop-down').slideUp(); 
      } 
} 

指令このコードを完全に削除して、0123を使用してアニメーションにCSSクラスを使用するだけですをクリックしてクラスを追加/削除する