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

问题描述

我是比较新的AngularJS并怀疑我没有把握的概念。我还使用Twitter的引导和我有jQuery的载入。

工作流程：用户点击从列表的链接，大师部分被更新，并链接用户点击涨幅活动类

基本HTML标记：

 ＆LT; UL类=列表的持有人NG控制器=adminController＆GT;
   ＆LT;立GT;＆LT;一个NG点击=setMaster（客户）＆GT;客户与LT; /李＆GT;
   ＆LT;立GT;＆LT;一个NG点击=setMaster（'雇员'）＆GT;员工与LT; /李＆GT;
   ＆LT;立GT;＆LT;一个NG点击=setMaster（'等'）＆GT;等等...＆LT; /李＆GT;
＆LT; / UL＆GT;
 

jQuery中这样做：

 的jQuery（。单持有人）。在（'点击'，'A'，函数（事件）{
    。事件preventDefault（）;
jQuery的（名单持有者利）。removeClass移除（激活）。
jQuery的（本）.parent（礼）addClass（激活）。
}）;
 

但我无法弄清楚如何整合角度和jQuery来完成这件事，因为我使用的角度来从服务器主机列表（JSON形式）和更新页面上的列表中。

如何整合呢？我似乎无法找到我点击的元素一旦我的角度控制器功能在

控制器：

 函数adminController（$范围）
    {
        $ scope.setMaster =功能（OBJ）
        {
            //我如何获得点击元素的父李？
            的console.log（OBJ）;
        }
    }
 

解决方案

虽然AngularJS可以让你获得与下面的语法上的click事件手（因此它的目标）（注意 $事件参数传递给 setMaster 功能;文档在这里：<一href=\"http://docs.angularjs.org/api/ng.directive:ngClick\">http://docs.angularjs.org/api/ng.directive:ngClick):

 函数AdminController（$范围）{
  $ scope.setMaster =功能（OBJ，$事件）{
    的console.log（$ event.target）;
  }
}
 

这是不很解决这个问题的角的方法。与AngularJS焦点是在模型上操纵。人们可能会发生变异的模式，让AngularJS找出渲染。

解决这个问题的AngularJS路（不使用jQuery和，而不需要通过 $事件参数）将是：

 ＆LT; D​​IV NG控制器=AdminController＆GT;
    ＆LT; UL类=名单持有者＆GT;
        ＆LT;李NG重复=一节中节NG-CLASS ={活跃：isSelected（部分）}＆GT;
            ＆LT;一个NG点击=setMaster（部分）＆GT; {{section.name}}＆LT; / A＆GT;
        ＆LT; /李＆GT;
    ＆LT; / UL＆GT;
    ＆LT;小时＆GT;
    {{选择| JSON}}
＆LT; / DIV＆GT;
 

凡在控制器方法是这样的：

  $ scope.setMaster =功能（部分）{
    $ scope.selected =部分;
}$ scope.isSelected =功能（部分）{
    返回$ scope.selected ===部分;
}
 

下面是完整的jsfiddle：<一href=\"http://jsfiddle.net/pkozlowski_opensource/WXJ3p/15/\">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屋！