web-dev-qa-db-ja.com

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

私は比較的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);
        }
    }
jqueryangularjs
172
R Down

AngularJSでは、クリックイベント（およびそのターゲット）を次の構文で確認できます（setMaster関数の$event引数に注意してください。ドキュメントはこちら： http：// docs）。 angularjs.org/api/ng.directive：ngClick ）：

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

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

（jQueryとを使わずに$event引数を渡さずに）この問題を解決するAngularJSの方法は、

<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/

282
pkozlowski.opensource