从 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 添加/删除该类