從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代碼，如果可以，它們可以編輯需要。 一旦指令本身被加載，我只想獲取文件的內容並在上面的控制器主體中運行它。 關於如何做到這一點的任何想法？ 甚至可以更好地解決整個問題？

Answer 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添加/刪除類。