在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 和 jQuery 来完成这项工作,因为我正在使用 Angular 从服务器获取主列表(以 JSON

形式)并更新页面上的列表。

我该如何整合它?一旦我进入角度控制器功能,我似乎无法找到我点击的元素

控制器:

function adminController($scope)

{

$scope.setMaster = function(obj)

{

// How do I get clicked element's parent li?

console.log(obj);

}

}

回答:

虽然 AngularJS 允许您使用以下语法(注意函数的$event参数setMaster;此处的文档:http:

//docs.angularjs.org/api/ng.directive

:ng点击):

function AdminController($scope) {    

$scope.setMaster = function(obj, $event){

console.log($event.target);

}

}

这不是解决这个问题的非常有角度的方式。AngularJS 的重点是模型操作。一个人会改变一个模型,让 AngularJS 计算出渲染。

解决此问题的 AngularJS 方式(不使用 jQuery 且 )将是:

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

以上是 在angularjs中访问单击的元素 的全部内容, 来源链接: www.h5w3.com/z/755870.html

回到顶部