angularjs - 要素の兄弟を取得する *Angular* の方法は何ですか?

Question

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>

Answer 1

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

Answer 2

あなたが提供したjQueryサンプルのAngularバージョンは次のとおりです。

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