私は比較的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);
}
}
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/