码迷,mamicode.com
首页 > Web开发 > 详细

angularjs-常用angular事件

时间:2017-08-15 14:15:09      阅读:279      评论:0      收藏:0      [点我收藏+]

标签:angularjs

<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
  <script type="text/javascript" src=‘js/angular.min.js‘> </script>
  <style type="text/css">
   .ng-cloak{display:none;}
  </style>
 </head>
 <body ng-app="hd" ng-cloak class="ng-cloak">
  <div ng-controller="ctrl">
   <input type="button" value="单击" ng-click=‘run()‘/>{{num}}<br />
   <input type="button" value="双击" ng-dblclick="dblrun()"/>{{dblnum}}<br />
   <!--ng-change需要绑定ng-model -->
   数据更改:<input type="text" ng-change="changerun()" ng-model="title"/>{{cnum}}<br />
   失去焦点:<input type="text" ng-blur="blurun()"/>{{bnum}}<br />
   获取焦点:<input type="text" ng-focus="focusrun()"/>{{fnum}}<br />
   按下键盘:<input type="text" ng-keydown="keydown()"/>{{knum}}<br />
   抬起键盘:<input type="text" ng-keyup="keyup()"/>{{kunum}}<br />
   鼠标按下:<input type="text" ng-mousedown="mousedown()"/>{{mdnum}}<br />
   鼠标抬起:<input type="text" ng-mouseup="mouseup()"/>{{munum}}<br />
   鼠标进入: <input type="text" ng-mouseenter="mouseenter()"/>{{menum}}<br />
   鼠标离开: <input type="text" ng-mouseleave="mouseleave()"/>{{mlnum}}<br />
   鼠标移动:<input type="text" ng-mousemove="mousemove()"/>{{mmnum}}<br />
  </div>
  
  <script type="text/javascript">
   var m=angular.module(‘hd‘,[])
   m.controller(‘ctrl‘,[‘$scope‘,function($scope){
    $scope.num=0
    //ng-click方法需要写进$scope中
    $scope.run=function(){$scope.num++}
    $scope.dblnum=0
    $scope.dblrun=function(){$scope.dblnum++}
    $scope.cnum=0
    $scope.changerun=function(){$scope.cnum++}
    $scope.bnum=0
    $scope.blurun=function(){$scope.bnum++}
    $scope.fnum=0
    $scope.focusrun=function(){$scope.fnum++}
    $scope.knum=0
    $scope.keydown=function(){$scope.knum++}
    $scope.kunum=0
    $scope.keyup=function(){$scope.kunum++}
    $scope.mdnum=0
    $scope.mousedown=function(){$scope.mdnum++}
    $scope.munum=0
    $scope.mouseup=function(){$scope.munum++}
    $scope.menum=0
    $scope.mouseenter=function(){$scope.menum++}
    $scope.mlnum=0
    $scope.mouseleave=function(){$scope.mlnum++}
    $scope.mmnum=0
    $scope.mousemove=function(){$scope.mmnum++}
   }])
  </script>
 </body>
</html>


angularjs-常用angular事件

标签:angularjs

原文地址:http://f1yinsky.blog.51cto.com/12568071/1956382

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!