Question

我需要在角度组件中插入一个jquery代码，这个jquery在html中是不好的做法。

我尝试在那里创建一个新函数并插入我的jquery代码，jquery它运行得很好，但我不知道为什么，函数链接现在已经破坏而且无法正常工作。

我是使用angular和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'
        };
      }

    ]);

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

]);

Answer 2

从angular开始时，最好将你的好习惯留在JQuery中，因为所有这些都成为角度的坏习惯，最好使用角度指令（有人已经写了你想要的东西）而不是使用指令中的JQuery。对于您要执行的操作，您可以在https://angular-ui.github.io/bootstrap/中引用collapse指令。

如何在angular指令中应用jquery代码

2 个答案: