angularjsでクリックされた要素にアクセスする


173

私はAngularJSに比較的慣れていないので、概念を理解していないと思います。私もTwitter Bootstrapを使用していて、jQueryをロードしています。

ワークフロー:ユーザーがリストからリンクをクリックすると、「マスター」セクションが更新され、ユーザーがクリックしたリンクがアクティブクラスを取得します。

基本的なHTMLマークアップ:

<ul class="list-holder" ng-controller="adminController">
   <li><a ng-click="setMaster('client')">Clients</li>
   <li><a ng-click="setMaster('employees')">Employees</li>
   <li><a ng-click="setMaster('etc')>Etc...</li>
</ul>

jQueryでこれを行う:

jQuery(".list-holder").on('click', 'a', function(event){
    event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});

しかし、Angularを使用してサーバーからマスターリスト(JSON形式)をフェッチし、ページ上のリストを更新するため、AngularとjQueryを統合してこれを行う方法を理解できません。

これをどのように統合しますか?角度コントローラー関数の中に入ると、クリックした要素が見つからないようです。

コントローラ:

function adminController($scope)
    {    
        $scope.setMaster = function(obj)
        {
            // How do I get clicked element's parent li?
            console.log(obj);
        }
    }

回答:


283

AngularJSでは、次の構文(関数の$event引数に注意してくださいsetMaster。ドキュメントはこちら:http : //docs.angularjs.org/api/ng.directive)でクリックイベント(つまり、そのターゲット)を取得できます。:ngClick):

function AdminController($scope) {    
  $scope.setMaster = function(obj, $event){
    console.log($event.target);
  }
}

これは、この問題を解決するための角度的な方法ではありません。AngularJSでは、焦点はモデル操作にあります。モデルを変更して、AngularJSにレンダリングを計算させます。

この問題を解決するAngularJSの方法(jQueryを使用せず、$event引数を渡す必要なし)は次のようになります。

<div ng-controller="AdminController">
    <ul class="list-holder">
        <li ng-repeat="section in sections" ng-class="{active : isSelected(section)}">
            <a ng-click="setMaster(section)">{{section.name}}</a>
        </li>
    </ul>
    <hr>
    {{selected | json}}
</div>

コントローラのメソッドは次のようになります。

$scope.setMaster = function(section) {
    $scope.selected = section;
}

$scope.isSelected = function(section) {
    return $scope.selected === section;
}

ここに完全なjsFiddleがあります:http ://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/


198
参考までに:$ eventは、マークアップで渡されない限り機能しませんng-click="setMaster(section, $event)"
Ben Lesh

4
実際には、関数に渡す必要があります。しかし実際には、コントローラーでこのようなdom固有のものを参照することはおそらく最良のアイデアではありません。:$イベントを使用する場合、一般的に、それが伝播またはのような停止の文脈でだ <a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>
ベン・レッシュ

9
ボタン内にアイコンがあったため、$ event.targetの使用に問題がありました。したがって、ターゲットの結果はボタンの場合とアイコンの場合があります(クリックした場所によって異なります)。targetの代わりに$ event.currentTargetを使用しましたが、これは魅力のように機能しました。
ラオス

4
$event.targetこのように使用することは「角度のある方法」ではないかもしれませんが、ng-repeat変更を評価するためにリスナーを必要とするすべてのアイテムで大きなリストを持っているような気がしますか?1つの要素をクリックすると、リスト全体のすべてのアイテムを再評価する必要がありますか?- $event.targetたとえば、CSSクラスを切り替えるために、その1つの項目だけをターゲットにしないでください。どう思いますか?私はPhonegap Appに取り組んでおり、できる限りのパフォーマンスの微調整を絞る必要があります。
Bradley Flood 2015年

13
$event.currentTarget代わりにを使用することもお勧めします$event.target。ng-clickを持つ要素に子要素がある場合、子要素がクリックされる$event.targetと子要素になります。$event.currentTarget指定されたng-clickで要素を常にターゲットにします。
Gene Parcellano 2015年
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.