как применить код JQuery в угловой директиве

0

Мне нужно вставить код jquery в угловой компонент, этот jquery был в html, поэтому не очень хорошая практика.

Я попытался создать там новую функцию и вставить свой jquery-код, jquery работает очень хорошо, но я не знаю, почему, функциональная ссылка теперь сломана и не работает.

Я новичок в использовании угловых и js, поэтому я не могу понять, может кто-то поможет решить эту проблему? объясните, что не так в коде, и я нарушил функцию выше

Спасибо.

Код jquery Я попытался применить

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

угловой файл:

 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'
        };
      }

    ]);
  • 0
    почему у вас есть 2 функции ссылки? В остальном код выглядит нормально. какова цель вашего кода. Вы хотите запускать этот фрагмент кода каждый раз, когда директива загружается впервые? Кроме того, вы включили ссылку на JQuery?
  • 0
    если я вставлю кусок кода JQuery в ссылку функции, работает отлично, но мне нужно создать функцию для меню и заставить оба работать. Понять?
Показать ещё 1 комментарий
Теги:

2 ответа

1
Лучший ответ

В возвращаемом объекте директивы вы используете два свойства link. Вам нужно поместить код jQuery, который вы указали внутри уже указанной функции связи, и использовать только одно свойство link в возвращаемом объекте.

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'
    };
  }

]);
  • 0
    хорошо, тут будет работать, но мне нужно положить этот код в функцию, понять? Я не могу поместить в функцию ссылки.
  • 0
    Вы можете поместить его в функцию и вызвать эту функцию внутри функции ссылки. Я обновляю код, чтобы показать, как это сделать
Показать ещё 2 комментария
0

Когда вы начинаете с углового, всегда лучше оставить свои хорошие практики в JQuery, потому что все это становится плохой практикой в угловом режиме, и лучше использовать угловую директиву (кто-то написал то, что вы хотите уже), чем использовать JQuery в пределах директивы. Для того, что вы пытаетесь сделать, вы можете ссылаться на директиву сворачивания в https://angular-ui.github.io/bootstrap/.

Ещё вопросы

Сообщество Overcoder
Наверх
Меню