我对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);
}
}
答案 0 :(得分:282)
虽然AngularJS允许您使用以下语法来处理click事件(以及它的目标)(请注意$event
函数的setMaster
参数;文档:{{ 3}}):
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://docs.angularjs.org/api/ng.directive:ngClick