2016-06-13 73 views
0

我在我在每個頁面上加載的網站中的頁腳部分中爲AngularJS做出了指示。在內部,我添加了一些需要在頁面加載後運行的jQuery代碼 - 這是我可以想到的唯一解決方案。下面是它的外觀的例子:從AngularJS指令中的文件運行JavaScript代碼

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代碼出在一個單獨的文件。原因是:我們一起工作的front-enders根本不知道AngularJS甚至沒有提到指令等等,所以我只想擁有一個單獨的文件,其中包含所有在頁面加載時運行的jQuery代碼,以便他們可以編輯它們需要。一旦指令本身被加載,我只想得到文件的內容並在上面的控制器中運行它。任何想法如何做到這一點?甚至更好的解決整個問題?

+0

您的網站是[SPA](https://en.wikipedia.org/wiki/Single-page_application)(即:它是否重新加載每個視圖更改或不)?如果是 - 你想在每個視圖更改上執行這個* jquery代碼*還是隻執行一次?如果它不是一個SPA,爲什麼不把這個腳本包含在標題中? – fracz

+0

這是一個SPA網站。我想在每次更改時執行一些代碼,其中一部分不是。這一切實際上取決於我是否在視圖中具有指令,這就是爲什麼我正在尋找一種方法來將指令特定的代碼放置在單獨的空間中,而這些空間只能由非角度開發人員訪問和理解,他們只處理html,js和css。 – mmvsbg

回答

1

您可以在另一個文件中定義的控制器,只是引用它的指令通過名字:

控制器

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(); 
      } 
} 

指令

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

您還可以得到完全擺脫這些代碼,只需使用一個css類動畫,使用ng-class在點擊鏈接時添加/刪除課程

+0

這裏有更多的代碼,而不僅僅是添加或刪除類。然而,你的方法是體面的,它仍然是一個有着「奇怪」東西的Angular文件,例如注入,控制器和其他角度相關的東西,我想讓人們不知道實際上是什麼角度。 – mmvsbg

+0

唯一的要求是用一個全局函數包裝這個* alien *代碼,比如'function footerCtrl(){/ *一些隨機的jquery * /}',就是這樣。 Angular現在可以將其用作控制器。 [見這裏](http://codepen.io/fracz/pen/ezZVWY)。 – fracz

+0

這只是兩行「外星人」代碼。他們可以忽略它,剩下的就是純JS/jQuery – Tomer