访问angularjs中的单击元素


173

我是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);
        }
    }

Answers:


283

虽然AngularJS可以让你得到一个click事件的手(因此它的目标)语法如下(注意$event参数的setMaster功能;文档在这里: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/


198
仅供参考:$ event除非在标记中通过,否则将不起作用:请ng-click="setMaster(section, $event)"注意。
Ben Lesh 2012年

4
并非如此,必须将其传递给函数。但是,实际上,在控制器中引用类似dom的东西可能不是最好的主意。通常,使用$ event时,它是在停止传播等情况下进行的: <a ng-click="doSomething(); $event.stopPropagation()">Click Just Me</a>
Ben Lesh 2014年

9
使用$ event.target时遇到问题,因为按钮内有一个图标。因此,有时目标结果是按钮,有时是图标(取决于我单击的位置)。我使用$ event.currentTarget而不是target,它就像一个魅力。
2014年

4
尽管使用$event.target这种方式可能不是“折角方式”,但我觉得要让ng-repeat每个条目都需要侦听器来评估更改的清单很大,这样效率不高吗?单击一个元素意味着整个列表中的每个项目都必须重新评估,对吗?-为什么不仅仅以那个项目$event.target为目标来切换CSS类。你怎么看?我正在开发Phonegap应用,需要尽我所能进行性能调整。
布拉德利洪水

13
我也建议您使用$event.currentTarget而不是$event.target。如果具有ng-click的元素具有子元素,则如果单击$event.target该子元素将成为该子元素。$event.currentTarget将始终以指定的ng-click定位到元素。
Gene Parcellano
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.