AngularJS를 사용하는 동적 slideToggle

Question

저는 AngularJS에 새로 왔으며 다음 jQuery 코드 조각을 AngularJS로 마이그레이션하려고합니다.

$('#someid').on('click', 'someclass', function() { 
    $(this).next().slideToggle('fast'); 
}); 

내가 AngularJS와로 전환하기 시작했다

내 HTML 보인다

<ul id='someid'> 
    <li ng-repeat="..."> 
    <ul> 
     <li class="someclass">{{ ... }}</li> 
     <li style="display:none">the part that will be slideToggle'd</li> 
    </ul> 
    </li> 
</ul> 

사용자가 응용 프로그램, 따라서 jQuery.on와 상호 작용하는 동적 때

요소가 NG 반복 목록에 추가됩니다 같은 것을() . 도움이된다면 AngularJS의 불안정한 버전을 사용해도됩니다.

AngularJS에서 jQuery 조각을 어떻게 다시 작성해야합니까? 새로운 지침을 추가하고, ng-animate 등을 사용하여 몇 가지 작업을 시도했습니다.하지만 컨트롤러에 jQuery 코드를 추가하면 추악 해 보였습니다. 하이브리드를 피하고 싶습니다.

고맙습니다.

Answer 1

한 가지 방법은 지침을 작성하여이 될 것입니다하지만, 이상적으로는 NG가-애니메이션 NG 쇼와 함께 사용해야합니다

을 첫째, 내부 속성을 전환하면 "리튬 계속 것이라고 NG를 클릭 someclass ""클래스와 "다음

<li class="someclass" ng-click="item.isVisible = !item.isVisible;">{{item.name}}</li> 

하고 함께 NG-쇼를 사용 slideToggle'd 될 부분에 NG-애니메이션.

<li ng-show="item.show" ng-animate="'animate'" style="display:none">the part that will be slideToggle'd</li> 

ng-animate가 작동하려면 애니메이션 CSS 클래스를 작성해야합니다.

희망이 도움이됩니다.

Answer 2

이 될 수 있습니다 수행하는 각 방법 :

<li class="someclass" ng-click="slider_open = !slider_open">..</> 
<li ng-show="slider_open">...</li> 

당신이 그것을 애니메이션을 적용 할 경우, 사용 NG-클래스 대신 NG 쇼와 CSS 전환을 사용합니다. 이 작업을 수행하는

Answer 3

Angularjs 모범 사례는 컨트롤러 내에서 DOM 조작을 수행하지 않는 것이 좋습니다. 이렇게하는 방법은 지시어를 사용하는 것입니다. 내가보기에는 jQuery 자체를 포함 할 필요조차 없다. 각도는 jQuery 하위 집합 (사용 가능한 기능은 http://docs.angularjs.org/api/angular.element 참조)을 제공하며 jQuery를 호출합니다. 당신의 HTML이 될 것입니다

var app = angular.module('myApp', []); 

app.directive('clickunfold', function() { 
    return { 
     restrict: 'C', 
     link: function (scope, element, attr) { 
      element.bind('click', function() { 
       element.next().removeClass('noShow').addClass('show'); 
      } 
     } 
    } 
}); 

그리고 :

대략 당신은 같은 것을해야

<ul> 
    <li class="clickunfold">{{ ... }}</li> 
    <li class="noShow">the part that will be slideToggle'd</li> 
</ul> 

을 그리고 당신의 CSS는 다음과 같습니다

.noShow { display: none } 
.show { /* Css Transitions to make the unfold effect or simply a display: block */ } 

위의 지침은 다음과 같이 정의된다 클래스 (restrict: 'C')와이 지시어를 클래스로 갖는 요소를 클릭하면 class remove & & class addnext()이 요소의 형제.

희망이 있습니다.