Benutzerdefinierte Richtlinie in Angular

Question

Hallo Ich habe die folgende Anweisung für ein Hamburger-Menü:

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

       }); 


      } 
     } 
    } 

Dies ist die Vorlage:

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

Dies ist, wie ich es in meiner Ansicht verwenden:

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

Jetzt habe ich eine Funktion in meiner Sicht, die eine Klasse zu einem Element beim Klicken hinzufügt. Dies öffnet ein Seitenmenü.

Jetzt, wenn mein Seitenmenü geöffnet ist, möchte ich das Symbol meines Menüs ändern, indem ich eine "offene" Klasse hinzufüge.

Auf meiner Anweisung habe ich ein Attribut namens "open", das ich sowohl an meinen Controller als auch an meine Direktive gebunden habe. Innerhalb meiner Richtlinie Verbindung Funktion Ich habe eine Uhr, die den Wert der Variable zu "Öffnen" überwachen soll, wenn es sich auf wahr ändert, sollte es eine Klasse "öffnen" für das Element, wenn es zu "false" ändert sollte die Klasse "open" vom Element entfernen.

Ich habe alles bisher versucht, aber ich kann nicht scheinen, dass dies funktioniert. In meinem Terminal werden keine Fehler angezeigt. Ich habe versucht, in meiner $ watch eine console.log() zu machen, um zu sehen, ob es tatsächlich erkannt hat, wann der Wert sich geändert hat, aber das hat auch nicht funktioniert, nichts wurde in meiner Konsole protokolliert.

Dies ist meine Umschaltfunktion:

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

Answer 1

Okay, so fand ich, was das Problem war, ich war die controllerAs Syntax dadurch eine Instanz meines Controller zu schaffen (wie ich glaube, es funktioniert) als vm . Aus irgendeinem Grund verstehe ich immer noch nicht vollständig, dass ich dieses Attribut nicht an eine Variable innerhalb dieser Instanz binden kann. Es funktionierte, als ich es zu scope.toggleMenu anstelle von vm.toggleMenu änderte.

Ich bin ziemlich neu zu angularjs, also gehe ich davon aus, dass Zwei-Wege-Bindung nur mit Scope-Variablen funktioniert oder wenn Sie nicht die ControllerAs-Syntax verwenden.