Question

我正在尝试转换以下jQuery脚本：

<script type="text/javascript">
  $(document).ready(function() {
    $(".openNav").click(function() {
      $("body").toggleClass("navOpen");
      $("nav").toggleClass("open");
      $(".wrapper").toggleClass("open");
      $(this).toggleClass("open");
    });
  });
</script>

到AngularJS代码中，到目前为止我所拥有的内容：

http://plnkr.co/edit/LBlKL26c3PP5nBUGWTtQ?p=preview

我几乎无法让它工作，这是一个粗糙的动画，但我不确定接下来我需要做什么。

以下是用jQuery编写的原始示例：http://codepen.io/Lewitje/pen/tyGdf

我很感激任何见解。

编辑：

可以添加此toggler以使其工作吗？

app.controller('test', ['$scope', '$timeout', '$mdUtil',      
'$log', function($scope, $timeout, $mdUtil, $log)  
{$scope.toggle= buildToggler('toggle');

function buildToggler(navID) {
  var debounceFn =  $mdUtil.debounce(function(){
        $mdSidenav(navID)
          .toggle()
          .then(function () {
            $log.debug("toggle " + navID + " is done");
          });
      },300);

  return debounceFn;
}}]);

我的想法已经不多了所以也许我会添加只是保留jQuery但我觉得这样会破坏AngularJS的目的

Answer 1

你几乎就在那里。 ng-switch的类被应用于错误的元素。

<p onclick="triggerAudio()"><img src="smiley.jpg" /></p>

这是将open类应用于body，nav，.wrapper和点击的内容。

$(".openNav").click(function() {
  $("body").toggleClass("navOpen");
  $("nav").toggleClass("open");
  $(".wrapper").toggleClass("open");
  $(this).toggleClass("open");
});

然而，您的示例中的ng-class将所有类应用于body标记。

http://plnkr.co/edit/03cO8o3EYsDt9y0JHQgK?p=preview

用于AngularJS的jQuery代码，包含用于css动画的ngclick和多个ngclass

1 个答案: