访问angularjs中点击的元素 [英] Accessing clicked element in angularjs

问题描述

我对 AngularJS 比较陌生，怀疑我没有掌握一个概念.我也在使用 Twitter Bootstrap 并且我已经加载了 jQuery.

工作流程:用户点击列表中的链接，主"部分更新，用户点击的链接获得活动类.

基本 HTML 标记:

<li><a ng-click="setMaster('client')">Clients</li><li><a ng-click="setMaster('employees')">Employees</li><li><a ng-click="setMaster('etc')>等等...</li>

在 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){//如何获得被点击元素的父 li?控制台日志(对象)；}}

解决方案

虽然 AngularJS 允许您使用以下语法(注意 $event<setMaster 函数的/code> 参数；此处的文档: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 参数)将是:

<ul class="list-holder"><li ng-repeat="section in section" ng-class="{active : isSelected(section)}"><a ng-click="setMaster(section)">{{section.name}}</a><小时>{{选择 |json}}

控制器中的方法如下所示:

$scope.setMaster = function(section) {$scope.selected = 部分；}$scope.isSelected = 函数(部分){返回 $scope.selected === 部分；}

这里是完整的 jsFiddle:http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/

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.

Workflow: User clicks a link from a list, "master" section is updated and link user clicked on gains active class.

Basic HTML Markup:

<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(".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.

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

解决方案

While AngularJS allows you to get a hand on a click event (and thus a target of it) with the following syntax (note the $event argument to the setMaster function; documentation here: 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.

The AngularJS-way of solving this problem (without using jQuery and without the need to pass the $event argument) would be:

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

这篇关于访问angularjs中点击的元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！