访问angularjs中的单击的元素

我对AngularJS比较陌生，怀疑我没有理解概念。 我也使用Twitter Bootstrap，并且我已经加载了jQuery。

工作stream程：用户点击列表中的一个链接，“主”部分被更新，链接用户点击获得激活的类别。

基本的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和jQuery来完成这个工作，因为我使用Angular从服务器获取主列表（以JSONforms）并更新页面上的列表。

我如何整合这个？ 一旦进入angular度控制器function，我似乎无法find我点击的元素

控制器：

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

Answer 1

虽然AngularJS允许你使用下面的语法来获得一个单击事件（因此它的一个目标）（注意setMaster函数的$event参数;文档在这里： http : setMaster ng.directive：ngClick ）：

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

这不是解决这个问题的很有angular度的方法。 使用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/