在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允许你使用下面的语法来获得一个单击事件（因此它的一个目标）（注意setMaster函数的$event参数;文档在这里：http: setMaster 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/

链接地址: http://www.djcxy.com/p/89965.html

上一篇: Accessing clicked element in angularjs

下一篇: What's the most concise way to read query parameters in AngularJS?