JQuery код AngularJS, включающих ngclick и нескольких ngclass для CSS анимации

Я пытаюсь преобразовать следующий JQuery скрипт:JQuery код AngularJS, включающих ngclick и нескольких 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 ... Я не уверен, почему этот пример isn 't работает для вас в CodePen – Ray

Вы были довольно много там. Классы для ng-переключателя применялись к неправильным элементам.

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

Это применило открытый класс к телу, nav, .wrapper и тому, что было нажато.

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

Принимая во внимание, что класс ng в вашем примере применяет все классы к тегу body.

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

источник

2015-05-22 02:02:51

работает как шарм, тысяча благодарностей Гарретта, и, что более важно, я понимаю концептуально то, что я делаю неправильно. Большое спасибо, сэр. – Ray

Добро пожаловать! –

JQuery код AngularJS, включающих ngclick и нескольких ngclass для CSS анимации

ответ

Смежные вопросы