172

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

1 回答 1

283

虽然 AngularJS 允许您使用以下语法（注意函数的$event参数setMaster；此处的文档：http: //docs.angularjs.org/api/ng.directive :ng点击):

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/

于 2012-09-14T20:01:50.383 回答