小编典典

访问angularjs中的单击元素

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);
            }
        }

阅读 308

收藏
2020-07-04

共1个答案

小编典典

虽然AngularJS允许您使用以下语法(请注意函数的$event参数setMaster;此处的文档)来尝试单击事件(并以此为目标),但请参见以下文档:http
//docs.angularjs.org/api/ng.directive
:ngClick):
    function AdminController($scope) {    
      $scope.setMaster = function(obj, $event){
        console.log($event.target);
      }
    }

这不是解决这个问题的角度。使用AngularJS的重点是模型操作。一个人会改变一个模型,然后让AngularJS找出渲染。

解决此问题(无需使用jQuery且 无需传递$event参数)的AngularJS方式为:

    <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/

2020-07-04