Running JavaScript code from a file in AngularJS directive

Question

I've made a directive in AngularJS for my footer section in a website that I load on every page. Inside, I've added some jQuery code that needs to get run once the page is loaded - that was the only solution I could think of for doing that. Here's an example of how it looks:

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

I'm not sure if that's the best way to do it but what I want to do now is get this jQuery code in the controller out in a separate file. The reason: the front-enders that we work with have no idea what AngularJS is not even to mention directive, etc. so I just want to have a separate file with all the jQuery code that gets run on page load that they can edit if needed. Once the directive itself gets loaded, I would just like to get the contect of the file and run it in the body of the controller up above. Any ideas on how to do that? Or even a better solution to the whole problem?

Is your website an SPA (i.e. does it reload on every view change or not)? If it is - do you want to execute this jquery code on every view change or only once? If it isn't an SPA, why don't you just include this script in the header? — fracz
– fracz, Commented Jun 13, 2016 at 9:52
It is an SPA website in this case. Some of the code I would like to execute on every change, some of it not. It all actually depends on whether I have the directive in the view or not which is why I'm looking for a way to have the directive specific's code in a separate space which would be accessible and understandable by non-angular developers who only deal with html, js and css. — mmvsbg
– mmvsbg, Commented Jun 13, 2016 at 16:09

Tomer · Accepted Answer · 2016-06-13 10:09:13Z

1

You can define the controller in another file and just reference it in the directive by name:

Controller

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

Directive

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

You can also get rid of this code entirely and just use a css class for the animation, using ng-class to add/remove the class when clicking the link

answered Jun 13, 2016 at 10:09

Tomer

17.9k16 gold badges82 silver badges139 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mmvsbg Over a year ago

There's much more code there than just adding or removing a class. Your approach is decent, however, it's still an Angular file with "strange" stuff like injections, controllers and other angular related stuff that I want to have hidden from people who have no idea what angular actually is.

fracz Over a year ago

The only requirement is to wrap this alien code with a global function, say function footerCtrl() { /* some random jquery */ }, that's all. Angular can now use it as a controller. See this.

Tomer Over a year ago

That's just 2 lines of "alien" code. they can just ignore it, the rest is pure JS/jQuery

Collectives™ on Stack Overflow

Running JavaScript code from a file in AngularJS directive

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related