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

从AngularJS指令中的文件运行JavaScript代码

1 个答案: