访问 angularjs 中的单击元素

我对 AngularJS 相对比较陌生，我怀疑自己没有掌握一个概念。我还使用了 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 和 jQuery 来完成这项工作，因为我正在使用 Angular 从服务器获取主列表(JSON 格式)并更新页面上的列表。

我该怎么整合这个？一旦进入角度控制器函数，我似乎找不到我点击的元素

总监:

function adminController($scope)
{
$scope.setMaster = function(obj)
{
// How do I get clicked element's parent li?
console.log(obj);
}
}
199895 次浏览
小开
最佳答案

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 解决渲染问题。

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/


提交答案