AngularJs link function and Jquery manipulation. Code doesn't seem to work

Question

I have a login modal in a directive which I am trying to make it work using link function and jquery but it doesn't seem to work.

This is the login button

<button login-modal type="button" class="btn">Sign In</button>

This is the smaller version of the login modal view

<div id="loginModal" class="modal fade" role="dialog"></div>

This is the login directive

angular
    .module('app')
    .directive('loginModal', ['$scope', loginModalDirective]);


    function loginModalDirective($scope) {
    return {
        restrict: 'E',
        templateUrl: 'template/loginmodal.view.html',
        link: function(scope, elem, attr) {
            elem.on('click', function() {
                jQuery("#loginModal").modal();
            });
        }
    };
}

You should seriously consider using AngularJS for handling events instead of jQuery. For instance, instead of doing elem.on('click' use the ng-click directive. — Heretic Monkey
– Heretic Monkey, Commented Jan 19, 2017 at 18:17
That's actually a good idea Mike but I have a part on my website where I'll be using tons of the same modal and I thought this way might be better. I am new to angular though so I might even be wrong. — S. Patel
– S. Patel, Commented Jan 19, 2017 at 18:29
@S.Patel That actually a reason that you should be using Angular. You can define a modal template (including a view and controller) just the same as you would for a full state and then pass it around to anything that needs to call up an instance of it. I'd recommend the Angular Bootstrap modal. — Harris
– Harris, Commented Jan 19, 2017 at 19:45

Heretic Monkey · Accepted Answer · 2017-01-19 18:20:05Z

4

You have the restriction to E, which means element. Your element is button. Your directive is not being initialized.

Use A for attribute, since login-modal is an attribute.

restrict: 'A'

Also (not a problem, just waste), you don't use $scope and there's no need to inject into the directive. You get scope in the link method already.

edited Jan 19, 2017 at 18:20

Heretic Monkey

12.2k7 gold badges63 silver badges133 bronze badges

answered Jan 19, 2017 at 18:13

Artem K.

8046 silver badges15 bronze badges

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

Collectives™ on Stack Overflow

AngularJs link function and Jquery manipulation. Code doesn't seem to work

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related