jQuery的代碼合併ngclick AngularJS和多ngclass對CSS動畫

我想下面的jQuery腳本轉換：jQuery的代碼合併ngclick AngularJS和多ngclass對CSS動畫

<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

來源

2015-05-22 Ray

這段代碼應該做什麼，它究竟是幹什麼的？ CodePen有一個「運行」按鈕嗎？ –

你的JSFiddle非常破碎。我建議你嘗試使用Plunker，它支持本地腳本文件 – Phil

它應該包含一個動畫，從而包裝向右下方移動以顯示每個Jquery代碼筆示例的導航菜單......我不確定爲什麼示例不是在CodePen – Ray

的目的。 ng-switch的類被應用於錯誤的元素。

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

這是將open類應用於body，nav，.wrapper和單擊的內容。

<body ng-app="myApp" ng-controller="test" ng-class="{'navOpen':toggle, 'icon':toggle, 'wrapper': toggle}" ng-click="toggle=!toggle">

而在你的榜樣納克級應用了所有類body標籤。

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

來源

2015-05-22 02:02:51

作品像一個魅力，一千個感謝加勒特，更重要的是，我從概念上理解我做錯了什麼。謝謝你，先生。 – Ray

非常歡迎！ –

jQuery的代碼合併ngclick AngularJS和多ngclass對CSS動畫

回答

相關問題