Angular ng-click not executing function inside a custom directive

Question

I have created a custom directive and added a controller to it and a function on the state hamburgerClick.Here is my code:

 directivesModule.directive('headerDir', [function () {
    var headerDir = {
        restrict: 'E',
        templateUrl: 'App/scripts/main/directives/header/HeaderDir.html',
        replace: true
    };

    headerDir.controller = ['$state', function ($state) {
        $state.hamburgerClick = function() {
            var app = $('.application-wrap');
            if (app.hasClass('menu-opened')) {
                app.removeClass('menu-opened');
            }
            else {
                app.addClass('menu-opened');
            }
        };
    }];

    return headerDir;
}]);

<div>
<span class="menu-overlay"></span>
<section class="menu-bar">
    <article>
        <div class="menu-button" ng-click="hamburgerClick()">
            <span class="hamburger-icon"></span>
        </div>
        <h1 class="logo"></h1>
    </article>
</section>

My problem is that for some reason the function does not get executed when I am trying to click on it.ANyone know what I am doing wrong?

1)Inject $scope not $state into your directives controller.2)The directive is not even include din markup you have posted. — ms87
– ms87, Commented Jul 8, 2014 at 9:41

pokaxperia · Accepted Answer · 2014-07-08 18:50:44Z

1

Try this!

directivesModule.directive('headerDir', [function () {
    return{
        restrict: 'E',
        templateUrl: 'App/scripts/main/directives/header/HeaderDir.html',
        replace: true
        controller: function($scope){
            $scope.hamburgerClick = function() {
                var app = $('.application-wrap');
                $('.application-wrap').toggleClass('menu-opened');
            };
        }
    }
}]);

answered Jul 8, 2014 at 18:50

pokaxperia

872 silver badges10 bronze badges

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

Comments

rcijvat · Accepted Answer · 2014-07-08 13:55:25Z

1

There are several things doubtful in your code

1) You should replace $state with $scope

2) You do not use your directive inside your HTML code. Instead, you refer to a directive named 'article'

3) You use replace:true, which replaces the original content of the directive. Unless you planned on defining your $('.menu-button') as header-dir directive, the call to hamburgerClick will be removed.

Furthermore, you could replace

var app = $('.application-wrap');
if (app.hasClass('menu-opened')) {
    app.removeClass('menu-opened');
}
else {
    app.addClass('menu-opened');
}

with

$('.application-wrap').toggleClass('menu-opened');

answered Jul 8, 2014 at 13:55

rcijvat

1822 silver badges12 bronze badges

Collectives™ on Stack Overflow

Angular ng-click not executing function inside a custom directive

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related