请使用firefox,chrome等最新浏览器浏览本站。

Angular传入js对象,阻止冒泡和默认行为

js+jquery 阿豹 342次浏览 0个评论 扫描二维码

AngularJs中给方法传入js对象,或者阻止冒泡和默认行为方法传入$event对象。

html代码:

<!DOCTYPE html>
    <html id="ng-app" ng-app="app">
    <head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"></script>
      <meta charset="utf-8">
      <title>$event</title>
    </head>
    <body ng-controller="myCtrl">
       <ul>
            <li ui-sref="{{item.url}}" ng-repeat="item in menu" ng-click="addClickClass($event)">{{item.name}}</li>
       </ul>
    </body>
    </html>

js代码:

angular.module("app",[])
.controller("myCtrl",['$scope', function($scope){
    $scope.menuData = [{
        name : "市场",
        url : "index.market"
    },{
        name : "魔方",
        url : "index.mofang"
    },{
        name : "节目",
        url : "index.tv"
    },{
        name : "APP下载",
        url : "index.download"
    }];

    scope.addClickClass = function($event){
        //阻止冒泡
        $event.stopPropagation();
        //阻止浏览器默认事件
        $event.preventDefault();
        //$event.currentTarget代表当前点击的js对象
        var $obj = angular.element($event.currentTarget);
        angular.forEach($obj.parent("ul").find("li"), function(value, key) {
            if(value === $event.currentTarget){
                angular.element(value).addClass('current');
            }else{
                angular.element(value).removeClass('current');
            }
        });
    }
 }]);

$event对象属性如下:
QQ截图20151224161126


喜欢 (9)or分享 (0)
发表我的评论
取消评论
表情 贴图 加粗 删除线 居中 斜体 签到