Custom Directive in Angular

Question

Hello I have the following directive for a hamburger menu:

angular.module('app.directives')
    .directive('hamburger', hamburger);

    // Injecting Dependencies
    hamburger.$inject = ['$rootScope', '$timeout'];

    // Directive's Function, Where All Code is Declared and Executed
    function hamburger($rootScope, $timeout) {
        return {
            restrict: 'E',
            scope: {
                open: '='
            },
            templateUrl: 'tpls/directives/hamburger.html',
            link: function (scope, elem, attr, ctrl) {

                scope.$watch('open', function(newValue, oldValue) {

                    if (newValue == true) {
                        $timeout(function () {
                            elem.addClass("open");
                        }, 2000);

                        console.log("This is true");
                    }
                    else {
                        $timeout(function () {
                            elem.removeClass("open");
                        }, 2000);

                        console.log("This is false");
                    }

                });


            }
        }
    }

This is the template:

<div>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
    <span></span>
</div>

This is how I use it in my view:

<hamburger class="menu-btn2 pull-left" snap-toggle="left" open="vm.toggleMenu" ng-click="toggle()" ng-dblclick="doNothing()"></hamburger>

Now I have a function in my view that adds a class to an element on click. This opens a side menu.

Now when my side menu is open I want to change the icon of my menu by adding an "open" class.

On my directive I have an attribute named "open" which I bind to both my controller and my directive. Inside my directive's link function I have a watch that is supposed to watch the value of the variable bound to "open" when it changes to true it should an a class "open" to the element when it changes to "false" it should remove the class "open" from the element.

I have tried everything so far but cannot seem to get this to work. There are no errors shown in my terminal, I tried to do a console.log() in my $watch to see if it was actually detecting when the value changed but that didn't work either, nothing was logged in my console.

This is my toggle function:

vm.toggleMenu = false;
vm.toggle = function () {
  vm.toggleMenu = !vm.toggleMenu;
};

It's likely that you're using the wrong binding type, `@` bindings are for strings. You may want to do a two way binding with `=`. Read more: https://blog.umur.io/2013/07/02/angularjs-directives-using-isolated-scope-with-attributes/ — Ezequiel Muns, Jun 13 '16 at 16:24
Yes I know this already. I actually used "=" initially when it didn't work I changed it to "@". — user3718908x100, Jun 13 '16 at 20:04
This code looks fine, do you have the code for your controller that is attached to the view for ``? — CShark, Jun 13 '16 at 20:20

score 0 · Answer 1 · answered Jun 13 '16 at 22:32

Okay so I found what the problem was, I was using the controllerAs syntax thereby creating an instance of my controller (how I believe it works) as vm. For some reason I still do not fully understand I am unable to bind that attribute to a variable within that instance. It worked when I changed it to scope.toggleMenu instead of vm.toggleMenu.

I'm quite new to angularjs so I'm going to assume that two way binding only works with scope variables or when you're not using the ControllerAs syntax.

Custom Directive in Angular

1 Answers1