Question

我正在为我的仪表板构建一个sidenavigation栏，在构建它的过程中，找到了一个很好的教程，它已经构建了类似的东西。我打算将其用作基础工作，然后再进行自定义。在本教程中，使用Jquery处理了动态内容。由于我使用Angularjs进行开发，我想以Angular方式进行。任何人都可以解释我如何实现它。

以下是link到教程。

代码段：

$("#menu-toggle").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled");
    });
     $("#menu-toggle-2").click(function(e) {
        e.preventDefault();
        $("#wrapper").toggleClass("toggled-2");
        $('#menu ul').hide();
    });

     function initMenu() {
      $('#menu ul').hide();
      $('#menu ul').children('.current').parent().show();
      //$('#menu ul:first').show();
      $('#menu li a').click(
        function() {
          var checkElement = $(this).next();
          if((checkElement.is('ul')) && (checkElement.is(':visible'))) {
            return false;
            }
          if((checkElement.is('ul')) && (!checkElement.is(':visible'))) {
            $('#menu ul:visible').slideUp('normal');
            checkElement.slideDown('normal');
            return false;
            }
          }
        );
      }
    $(document).ready(function() {initMenu();});

如何将其转换为线性Angular方式？

由于

Answer 1

将此绑定事件替换为视图/控制器映射

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

在视图中

<div id="menu-toggle" ng-click="toggleClass"></div>

然后在角度控制器中

$scope.toggleClass = function(){
    angular.element('#wrapper').toggleClass('toggled')
};

你可以为这一个做同样的事情

 $("#menu-toggle-2").click(function(e) {
    e.preventDefault();
    $("#wrapper").toggleClass("toggled-2");
    $('#menu ul').hide();
});

可以在主控制器中触发

initMenu ，只需将$替换为angular.element

如果没有旧的浏览器兼容性要求，由于css perf vs js perf

，你应该开始使用CSS3类进行转换而不是JS

function initMenu() {
  angular.element('#menu ul').hide(); 
  angular.element('#menu ul').children('.current').parent().show();
}

initMenu();

对于$('#menu li a').click()事件，请使用视图/控制器映射

以角度方式做jquery事情

1 个答案: