AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

AngularJS 事件

2016-03-28 1947
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

这一篇博客为大家介绍一下AngularJS为我们提供的事件指令。

ngBlur

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.blur=function(msg){
                    alert(msg);
                };
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-blur="blur('button1 blur')" type="button" value="button1" />
    </body>

</html>

ngChange

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.counter = 0;
                $scope.change = function() {
                    $scope.counter++;
                };
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input type="checkbox" ng-model="confirmed" ng-change="change()" id="ng-change-example1" />
        <label for="ng-change-example1">Confirmed</label><br />
        <tt>counter = {{counter}}</tt><br/>
    </body>

</html>

ngClick

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-click="count = count + 1">Increment</button>
        <span>count: {{count}}</span>
    </body>

</html>

ngCopy

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.copied = false;
                $scope.value = 'copy me';
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-copy="copied=true" ng-model="value"> copied: {{copied}}
    </body>

</html>

ngCut

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.cut = false;
                $scope.value = 'cut me';
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-cut="cut=true" ng-model="value"> cut: {{cut}}
    </body>

</html>

ngDblclick

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-dblclick="count = count + 1">
            Increment (on double click)
        </button> count: {{count}}
    </body>

</html>

ngKeydown

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-keydown="count = count + 1">
        key down count: {{count}}
    </body>

</html>

ngKeypress

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-keypress="count = count + 1">
        key press count: {{count}}
    </body>

</html>

ngKeyup

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <p>Typing in the input box below updates the key count</p>
        <input ng-keyup="count = count + 1"> key up count: {{count}}

        <p>Typing in the input box below updates the keycode</p>
        <input ng-keyup="event=$event">
        <p>event keyCode: {{ event.keyCode }}</p>
        <p>event altKey: {{ event.altKey }}</p>
    </body>

</html>

ngMousedown

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mousedown="count = count + 1">
            Increment (on mouse down)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseenter

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseenter="count = count + 1">
            Increment (when mouse enters)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseleave

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseleave="count = count + 1">
            Increment (when mouse leaves)
        </button>
        count: {{count}}
    </body>

</html>

ngMousemove

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mousemove="count = count + 1">
            Increment (when mouse moves)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseover

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseover="count = count + 1">
            Increment (when mouse is over)
        </button>
        count: {{count}}
    </body>

</html>

ngMouseup

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.count = 0;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <button ng-mouseup="count = count + 1">
            Increment (on mouse up)
        </button>
        count: {{count}}
    </body>

</html>

ngPaste

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <script src="angular.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            angular.module("MyApp", []).controller("MyCtrl", function($scope) {
                $scope.paste = false;
            });
        </script>
    </head>

    <body ng-app="MyApp" ng-controller="MyCtrl">
        <input ng-paste="paste=true" placeholder='paste here'>
        pasted: {{paste}}
    </body>

</html>
文章标签：
JavaScript
前端开发
蒋固金
目录
相关文章
1941623231718325
|
6月前
|
JavaScript
AngularJS中的自定义指令：创建与使用技术详解
【4月更文挑战第27天】本文详细介绍了AngularJS中自定义指令的创建与使用。通过定义指令工厂函数并注册到模块中，可以创建自定义指令，如示例中的`myCustomDirective`。指令的属性（如`restrict`、`template`、`replace`）和方法（如`link`、`scope`）可定制其行为。在HTML中使用`restrict`指定的方式（如元素、属性等）来插入指令。遵循命名规范，避免直接DOM操作，使用隔离作用域和关注重用性与扩展性，能有效提升代码质量。自定义指令是AngularJS强大功能之一，有助于实现复杂DOM操作和组件复用。
1941623231718325
58 2
hust_hwu
|
移动开发 前端开发 JavaScript
AngularJS 技术深入解析
AngularJS 是一个流行的 JavaScript 框架，用于构建动态的单页面应用程序（SPA）。它提供了一种优雅而强大的方式来开发前端应用，具有出色的数据绑定、模块化和可扩展性等特性。本文将深入探讨 AngularJS 的一些关键技术。
hust_hwu
111 0
phubing
|
JavaScript
AngularJs错误
AngularJs错误
phubing
91 0
毕来生
|
JavaScript
AngularJs-03-数据的双向绑定
<!DOCTYPE html> <html lang="zh" ng-app="myapp"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.
毕来生
1217 0
青夜之衫
|
数据格式 JSON JavaScript
【AngularJS】—— 5 表单
青夜之衫
754 0
技术小阿哥
angularjs 基础
技术小阿哥
1022 0
桃子红了呐
|
JavaScript 前端开发
AngularJS的简单表单验证
桃子红了呐
1047 0
范大脚脚
|
JavaScript 前端开发 移动开发
angularjs1-4 事件指令
范大脚脚
1120 0
范大脚脚
angularjs 自定义服务
范大脚脚
947 0
zting科技
|
Web App开发 JavaScript 前端开发
Angularjs 事件指令
zting科技
1060 0