Wie man einen jquery Code in der Winkelanweisung anwendet

Question

Ich muss einen jquery Code in eine eckige Komponente einfügen, diese jquery war im html so nicht gute Praxis.

Ich habe versucht, eine neue Funktion dort zu erstellen und meinen jquery Code einzufügen, die jquery es funktioniert sehr gut, aber ich weiß nicht warum, die Funktion Link ist jetzt kaputt und funktioniert nicht.

Ich bin neu mit eckigen und js so kann ich nicht gut verstehen, kann jemand helfen, dies zu lösen? erklären, was im Code falsch ist und ich die Funktion über

gebrochen habe Danke.

jQuery-Code habe ich versucht,

$('#close, #menu-toggle').click(function(e) { 
      e.preventDefault(); 
      $('#wrapper').toggleClass('toggled'); 
     }); 

Winkel Datei anzuwenden:

angular.module('test').directive('leftBar', [ 
     'leftBarService', 
     function leftBar(leftBarService) { 
     'use strict'; 

     var 
      scope = { 
      onLeafNode: '=' 
      }; 

     function link($scope, $element) { 
      $element.leftBar({ 
      speed: 1000, 
      useDynamicLoading: false, 
      onLeafNodeReched: $scope.onLeafNode 
      }); 

     } 

     function menu ($scope, $element){ 
      $('#close, #menu-toggle').click(function(e) { 
      e.preventDefault(); 
      $('#wrapper').toggleClass('toggled'); 
      }); 
     } 

     return { 
      restrict: 'A', 
      scope: scope, 
      link: link, 
      link:menu, 
      templateUrl: 'app/test/leftBar/leftBar.html' 
     }; 
     } 

    ]); 

Answer 1

In dem zurückkehr Ziel der Richtlinie Sie zwei Eigenschaften link s verwenden. Sie müssen den von Ihnen erwähnten jQuery-Code in die bereits deklarierte Verknüpfungsfunktion einfügen und nur eine link-Eigenschaft im zurückgegebenen Objekt verwenden.

angular.module('test').directive('leftBar', [ 
    'leftBarService', 
    function leftBar(leftBarService) { 
    'use strict'; 

    var 
     scope = { 
     onLeafNode: '=' 
     }; 

    function link($scope, $element) { 
     $element.leftBar({ 
     speed: 1000, 
     useDynamicLoading: false, 
     onLeafNodeReched: $scope.onLeafNode 
     }); 

     menu(); 
    } 

    function menu() { 
     $('#close, #menu-toggle').click(function(e) { 
     e.preventDefault(); 
     $('#wrapper').toggleClass('toggled'); 
     }); 
    } 

    return { 
     restrict: 'A', 
     scope: scope, 
     link: link, 
     templateUrl: 'app/test/leftBar/leftBar.html' 
    }; 
    } 

]); 

Answer 2

Wenn mit Winkel starten, ist es immer besser, Ihre gute Praktiken in JQuery hinter sich zu lassen, weil alles, was eine schlechte Praxis in Winkel wird und es ist besser, eine Winkel Richtlinie zu verwenden (jemand geschrieben haben, was Sie wollen bereits), als JQuery innerhalb einer Direktive zu verwenden. Für was Sie versuchen, können Sie die Kollatierungsrichtlinie in https://angular-ui.github.io/bootstrap/ beziehen.