jQuery 访问angularjs中点击的元素
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/12430820/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Accessing clicked element in angularjs
提问by R Down
I'm relatively new to AngularJS and suspect I'm not grasping a concept. I'm also using Twitter Bootstrap and I've got jQuery loaded.
我对 AngularJS 比较陌生，怀疑我没有掌握一个概念。我也在使用 Twitter Bootstrap 并且我已经加载了 jQuery。
Workflow: User clicks a link from a list, "master" section is updated and link user clicked on gains active class.
工作流程：用户单击列表中的链接，更新“主”部分，用户单击的链接获得活动类。
Basic HTML Markup:
基本 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>
Doing this in jQuery:
在 jQuery 中这样做：
jQuery(".list-holder").on('click', 'a', function(event){
event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});
But I can't figure out how to integrate Angular and jQuery to get this done, because I'm using Angular to fetch the master list (in JSON form) from the server and update a list on the page.
但是我不知道如何集成 Angular 和 jQuery 来完成这项工作，因为我使用 Angular 从服务器获取主列表（以 JSON 形式）并更新页面上的列表。
How do I integrate this? I can't seem to find the element I've clicked on once I'm inside the angular controller function
我如何整合这个？一旦我进入角度控制器功能，我似乎无法找到我点击的元素
Controller:
控制器：
function adminController($scope)
{
$scope.setMaster = function(obj)
{
// How do I get clicked element's parent li?
console.log(obj);
}
}
回答by pkozlowski.opensource
While AngularJS allows you to get a hand on a click event (and thus a target of it) with the following syntax (note the $eventargument to the setMasterfunction; documentation here: http://docs.angularjs.org/api/ng.directive:ngClick):
虽然 AngularJS 允许您使用以下语法（注意函数的$event参数setMaster；此处的文档：http: //docs.angularjs.org/api/ng.directive）来处理单击事件（以及它的目标）:ngClick):
function AdminController($scope) {
$scope.setMaster = function(obj, $event){
console.log($event.target);
}
}
this is not very angular-way of solving this problem. With AngularJS the focus is on the model manipulation. One would mutate a model and let AngularJS figure out rendering.
这不是解决这个问题的非常角度的方法。AngularJS 的重点是模型操作。人们会改变一个模型并让 AngularJS 来解决渲染问题。
The AngularJS-way of solving this problem (without using jQuery and without the need to pass the $eventargument) would be:
解决这个问题的 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>
where methods in the controller would look like this:
控制器中的方法如下所示：
$scope.setMaster = function(section) {
$scope.selected = section;
}
$scope.isSelected = function(section) {
return $scope.selected === section;
}
Here is the complete jsFiddle: http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/
这是完整的 jsFiddle：http: //jsfiddle.net/pkozlowski_opensource/WXJ3p/15/
