요소 형제를 얻는 *각도* 방법은 무엇입니까?

요소 형제를 얻는 *각도* 방법은 무엇입니까?

AngularJS를 사용하여 클릭했을 때 요소 형제를 얻는 관용적인 방법은 무엇입니까?

지금까지 제가 얻은 것은 다음과.

<div ng-controller="FooCtrl">
    <div ng-click="clicked()">One</div>
    <div ng-click="clicked()">Two</div>
    <div ng-click="clicked()">Three</div>
</div>

<script>
    function FooCtrl($scope){
        $scope.clicked = function()
        {
            console.log("Clicked", this, arguments);
        };
    }
</script>

구체적인 예로 jQuery 구현을 들 수 있습니다.

<div id="foo">
    <div>One</div>
    <div>two</div>
    <div>three</div>
</div>

<script>
    $(function(){
        $('#foo div').on('click', function(){
            $(this).siblings('div').removeClass('clicked');
            $(this).addClass('clicked');
        });
    });
</script>

DOM을 통과하려면 지시문을 사용합니다.

app.directive('sibs', function() {
    return {
        link: function(scope, element, attrs) {
            element.bind('click', function() {
                element.parent().children().removeClass('clicked');
                element.addClass('clicked');
            })
        },
    }
});

<div sibs>One</div>
<div sibs>Two</div>
<div sibs>Three</div>

jQuery는 필요하지 않습니다.

fiddle

제공하신 jQuery 샘플의 각도 버전은 다음과 같습니다.

HTML:

<div ng-controller="FooCtrl">
    <div ng-click="selected.item='One'" 
    ng-class="{clicked:selected.item=='One'}">One</div>
    <div ng-click="selected.item='Two'" 
    ng-class="{clicked:selected.item=='Two'}">Two</div>
    <div ng-click="selected.item='Three'" 
    ng-class="{clicked:selected.item=='Three'}">Three</div>
</div>

JS:

function FooCtrl($scope, $rootScope) {   
    $scope.selected = {
        item:""
    }
}

참고: 이를 위해 DOM에 엄격하게 액세스할 필요는 없습니다.하지만 그래도 그러고 싶다면 간단한 지시문을 작성할 수 있습니다.아래와 같은 것:

HTML:

<div ng-controller="FooCtrl">
    <div ng-click="clicked()" get-siblings>One</div>
    <div ng-click="clicked()" get-siblings>Two</div>
    <div ng-click="clicked()" get-siblings>Three</div>
</div>

JS:

yourApp.directive('getSiblings', function() {
   return {
      scope: true,
      link: function(scope,element,attrs){
         scope.clicked = function () {
            element.siblings('div').removeClass('clicked');
            element.addClass('clicked');
         }
      }
   }
});

fiddle

다음은 (jqLite에서 빌린) Angular grammar로만 만들어진 지시문입니다.

link: function(scope, iElement, iAttributes, controllers) {
    var parentChildren,
        mySiblings = [];

    // add a marker to this element to distinguish it from its siblings
    // this could be a lot more robust
    iElement.attr('rsFindMySiblings', 'anchor');

    // get my parent's children, it will include me!
    parentChildren = iElement.parent().children();

    // remove myself
    scope.siblings = [];
    for (var i=0; i < parentChildren.length; i++) {
       var child = angular.element(parentChildren[i]);
       var attr = child.attr('rsFindMySiblings');
       if (!attr) {
         scope.siblings.push({name: child[0].textContent});  
       }
    }
}

컨트롤러를 사용하여 결과를 저장합니다.자세한 예는 이 플렁커를 참조하십시오.

언급URL : https://stackoverflow.com/questions/18212098/what-is-the-angular-way-to-get-an-elements-siblings