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

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

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>

在jQuery中执行此操作:

jQuery(".list-holder").on('click', 'a', function(event){
    event.preventDefault();
jQuery(".list-holder li").removeClass('active');
jQuery(this).parent('li').addClass('active');
});

但是我不知道如何集成ANGLE和jQuery来完成这项工作,因为我使用ANGLE从服务器获取主列表(JSON格式)并更新页面上的列表.

我如何集成这一点呢?一旦我进入Angular 控制器函数,似乎就找不到我单击过的元素

控制器:

function adminController($scope)
    {    
        $scope.setMaster = function(obj)
        {
            // How do I get clicked element's parent li?
            console.log(obj);
        }
    }

推荐答案

AngularJS允许您使用以下语法(请注意setMaster函数的$event参数;此处的文档:http://docs.angularjs.org/api/ng.directive:ngClick)控制点击事件(从而成为点击事件的目标):

function AdminController($scope) {    
  $scope.setMaster = function(obj, $event){
    console.log($event.target);
  }
}

这不是解决这个问题的很有Angular 的方法.AngularJS的重点是模型操作.一种方法是对模型进行变异,让AngularJS计算渲染.

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/

Jquery相关问答推荐

如何滚动到AngularJS中的页面顶部?

JQuery通过类名获取所有元素

如何判断输入日期是否等于今天的日期?

用jquery查找div底部的位置

如何在单击时 Select 多选 Select 框的所有选项?

有没有办法放大 D3 力布局图?

使用 JavaScript 和 jQuery,跨浏览器处理按键事件 (F1-F12)

javascript 正则表达式用于包含至少 8 个字符、1 个数字、1 个大写和 1 个小写的密码

如何获取 onclick 调用对象?

jquery:更改URL地址而不重定向?

在javascript中检测按键的最简单方法

通过 AJAX 和 jQuery 使用 HTML5 文件上传

jQuery 不会从 AJAX 查询中解析我的 JSON

如何通过js打开 Select 文件对话框?

Javascript 将 Markdown/Textile 转换为 HTML(理想情况下,返回 Markdown/Textile)

我如何知道 jQuery 是否有待处理的 Ajax 请求?

jQuery 发送字符串作为 POST 参数

请求的资源错误中不存在Access-Control-Allow-Origin标头

jQuery clone() 不克隆事件绑定,即使使用 on()

在 Firefox 上开发的 Javascript 在 IE 上失败的典型原因是什么?