각도를 사용하면 클릭 이벤트를 요소에 바인딩하고 클릭하면 형제 요소를 위아래로 슬라이드 할 수 있습니까?

Question

저는 Angular와 함께 일하고 있는데, 저는 보통 jQuery를 사용하는 것에 문제가 있습니다.

클릭 이벤트를 요소에 바인딩하고 클릭시 형제 요소를 위아래로 슬라이드합니다.

<div ng-click="events.displaySibling()"></div> 

을 그리고이 무엇인지 내 컨트롤러 : 내 마크 업 기능과 NG 클릭 속성을 추가 한 각도를 사용

$('element').click(function() { 
    $(this).siblings('element').slideToggle(); 
}); 

:

이

은 jQuery를은 다음과 같은 형태가 될 것이다 다음과 같이 표시됩니다.

지금까지 예상대로 작동하지만 어코드하는 법을 모르겠습니다. 슬라이드를 닦으십시오. 어떤 도움이라도 대단히 감사합니다.

업데이트

나는 지시어와 교체했다.

내 태그는 이제 다음과 같습니다 : 나는 내 컨트롤러에 있던 무슨 제거하고 새로운 지침을 만든

<div class="wrapper padding myevent"></div> 

.

app.directive('myevent', function() { 
    return { 
     restrict: 'C', 
     link: function(scope, element, attrs) { 
      element.bind('click', function($event) { 
       element.parent().children('ul').slideToggle(); 
      }); 
     } 
    } 
}); 

그러나 여전히 슬라이드 토글을 사용할 수 없습니다. slideToggle()이 Angular에서 지원됩니다. 어떤 제안?

Answer 1

나는 당신이 말하는 행동에 대해 정확히 모르겠다. 그러나 나는 당신이 약간 다른 방식으로 생각하도록 권장 할 것이다. 덜 jQuery, 더 각도. - yearofmoo 어떻게 $animate 작품의 훌륭한 개요를 가지고

<div ng-click="visible = !visible"></div> 
<div ng-show="visible">I am the sibling!</div> 

그런 다음 형제 슬라이드를 만들기 위해 ng-animate에서 빌드를 사용할 수 있습니다

,이처럼 html로 뭔가가있다.

이 예에서는 HTML에 표시 로직을 넣을 수있을만큼 간단하지만 그렇지 않으면 다음과 같이 컨트롤러에 넣어 원칙적으로하는 것이 좋습니다 것입니다 :

<div ng-click="toggleSibling()"></div> 
<div ng-show="visible"></div> 

컨트롤러 :

이러한 종류의 구성 요소는 지시어의 가장 중요한 후보이기도합니다.이 구성 요소는 모든 것을 깔끔하게 정리합니다.

Answer 2

app.directive('slideMySibling', [function(){ 
    // Runs during compile 
    return { 
    // name: '', 
    // priority: 1, 
    // terminal: true, 
    // scope: {}, // {} = isolate, true = child, false/undefined = no change 
    // controller: function($scope, $element, $attrs, $transclude) {}, 
    // require: 'ngModel', // Array = multiple requires, ? = optional,^= check parent elements 
    restrict: 'A', // E = Element, A = Attribute, C = Class, M = Comment 
    // template: '', 
    // templateUrl: '', 
    // replace: true, 
    // transclude: true, 
    // compile: function(tElement, tAttrs, function transclude(function(scope, cloneLinkingFn){ return function linking(scope, elm, attrs){}})), 
    link: function($scope, iElm, iAttrs, controller) { 
     iElm.bind("click", function(){ 
     $(this).siblings('element').slideToggle(); 
     }) 
    } 
    }; 
}]); 

사용이 될 뭔가

<div slide-my-sibling><button>Some thing</button></div><div>Some sibling</div> 

같은 주 모든 "코드"위의 단지 예를 위해서이며, 실제로 테스트되지 않았습니다.

http://plnkr.co/edit/qd2CCXR3mjWavfZ1RHgA

여기에 샘플입니다 Plnkr 등은 여전히 ​​이상적으로 당신은 몇 가지 지침이 작업을 수행 할 뷰의 구조에 대한 가정을 만드는 자바 스크립트가 있기 때문에이 이상적인 설치되지 않습니다 코멘트에서 언급했지만 여기서 하나는 다른 것을 필요로하거나 이벤트를 사용한다 ($ emit, $ broadcast, $ on 참조).

또한 지시문을 통해 JavaScript를 통해 "프로그래밍 방식으로"자식을 만들 수 있으며 지시문이 어떤 문맥에서 사용되는지 알지 못하는 문제를 피할 수 있습니다. 문제는 없지만 이러한 문제를 해결할 수있는 많은 방법이 있습니다 당신의 코드에서 https://docs.angularjs.org/api/ng/function/angular.element

AngularJS와 요소가 관련에 대한 JQuery와 DOM 객체를 나타냅니다 기능이 링크 당으로 등, 그들은 재사용 성, 안정성 테스트를 위해 주목할 가치가있다

Answer 3

작업을 중지합니다 요소. JQuery 함수를 사용하려면 각도 하중을 받기 전에 JQuery 라이브러리를 사용해야한다. 자세한 내용은 위의 링크를 참조하십시오.

Answer 4

모범 사례 :

<div ng-if="view"></div> 

$scope.view = true; 

$scope.toggle = function(){ 
    $scope.view = ($scope.view) ? false : true; 
}