你不知道的angularJs内置directive（一）

最新推荐文章于 2020-09-24 17:19:26 发布

世态炎凉！！

最新推荐文章于 2020-09-24 17:19:26 发布

阅读量1.2k

点赞数 3

分类专栏： AngularJs 文章标签： javascript html html5

本文链接：https://blog.csdn.net/ws9029/article/details/108548852

版权

AngularJs 专栏收录该内容

17 篇文章 0 订阅

订阅专栏

angualr directive 的directive有很多，平时用的比较多ng-click，ng-if,ng-repeat等，那面下面来说下不怎么经常用的ng directive,好了话不多说，直接进入正题！

1.ng-change

作用：当用户更改输入时或者当输入值的变化时候，会触发ng-change事件

该指令必须ngModel同时使用

<!DOCTYPE html>
<html lang="en" ng-app='changeExample'>
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="angular.js"></script>
</head>

<body>
    <div ng-controller="ExampleController">
        <input type="checkbox" ng-model="checkbox" ng-init="checkbox=false" ng-change="change()" />
        <input type="text" ng-model="text" ng-change="change()">
        <select ng-model="select" ng-init="select='1' " ng-change="change()">
            <option value="1">1</option>
            <option value="2">2</option>
            <option value="3">3</option>
        </select>
        <span>{{checkbox}}</span>
        <span>{{text}}</span>
        <span>{{select}}</span>
        <span>ng-chang执行次数:{{counter}}</span>
    </div>
    <script type="text/javascript">
        angular.module('changeExample', [])
            .controller('ExampleController', ['$scope', function ($scope) {
                $scope.counter = 0;
                $scope.change = function () {
                    $scope.counter++;
                };
            }]);
    </script>
</body>
</html>

例子比较简单主要举例了input复选框，input文本框，select下拉列表这么触发ng-change事件！
在这里插入图片描述
ng-change必须要和ng-model一起使用，否则会报下图错误！

指令’ngChange’需要控制器’ngModel’，找不到!

2.ng-checked

作用：指令用于设置复选框(checkbox)或单选按钮(radio)的 checked 属性，如果 ng-checked 属性返回 true，复选框(checkbox)或单选按钮(radio)将会被选中。

注意：此指令不应与一起使用ngModel，因为这可能导致意外行为

<!DOCTYPE html>
<html lang="en" ng-app='changeExample'>
<head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title>Document</title>
   <script src="angular.js"></script>
</head>
<body>
   <div ng-controller="ExampleController">
       <input type="checkbox" ng-model="all" ng-init='all=false'> Check all<br><br>
       <input type="checkbox" ng-checked="all">js<br>
       <input type="checkbox" ng-checked="all">ts<br>
       <input type="checkbox" ng-checked="all">css
   </div>
   <script type="text/javascript">
       angular.module('changeExample', [])
           .controller('ExampleController', ['$scope', function ($scope) {
               $scope.counter = 0;
               $scope.$watch('all',function(n,o){
                   console.log('新值'+n,'旧值'+o);
               })
           }]);
   </script>
</body>
</html>

看下图操作:
在这里插入图片描述
很明显的发现：当手工设置复选框的选中状态时，居然watch不到，那么说明ng-checked的值没有发生任何改变！所以ng-checked不能很好反馈复选框的选中状态，只能用来设置选中状态!，那么有人就问了，我就想我单击之后，all也发生变化，可以吗？当然可以！把ng-check改成ng-model就可以！

<!DOCTYPE html>
<html lang="en" ng-app='changeExample'>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="angular.js"></script>
</head>
<body>
<div ng-controller="ExampleController">
    <input type="checkbox" ng-model="all" ng-init='all=false'> Check all<br><br>
    <input type="checkbox" ng-model="all">js<br>
    <input type="checkbox" ng-model="all">ts<br>
    <input type="checkbox" ng-model="all">css
</div>
<script type="text/javascript">
    angular.module('changeExample', [])
        .controller('ExampleController', ['$scope', function ($scope) {
            $scope.counter = 0;
            $scope.$watch('all',function(n,o){
                console.log('新值'+n,'旧值'+o);
            })
        }]);
</script>
</body>
</html>

在这里插入图片描述

3.ngClassEven，ngClassOdd

作用：定义class,并且只在奇数（偶数）行的效果

注意：该指令只能在ngRepeat的范围内应用

<style>
.even {
    color: red
}

.odd {
    color: blue
}
</style>
<body>
<div>
    <ul ng-init="arr=['js','ts','css','angular']">
        <li ng-repeat='item in arr'>
            <span ng-class-even="'even'" ng-class-odd="'odd'" ng-bind='item'></span>
        </li>
    </ul>
</div>
<script>
    var app = angular.module('test', []);
</script>

在这里插入图片描述

4.ngCopy

作用：复制的自定义行为事件

<body ng-controller="controllerTest">
<div ng-copy='copy()'>
    选中我复制
</div>
<span>复制事件次数{{count}}</span>
<script>
    var app = angular.module('test', []);
    app.controller('controllerTest', function ($scope) {
        $scope.count = 0;
        $scope.copy = function () {
            $scope.count++;
        }
    })
</script>
</body>

指令很简单，直接看下图：
在这里插入图片描述

5.ngCut

作用：剪切的自定义行为事件

<body ng-controller="controllerTest">
<input type='text' ng-cut='cut()' value="123123123123123">
</input>
<span>剪切事件次数{{count}}</span>
<script>
    var app = angular.module('test', []);
    app.controller('controllerTest', function ($scope) {
        $scope.count = 0;
        $scope.cut = function () {
            $scope.count++;
        }
    })
</script>
</body>

在这里插入图片描述

世态炎凉！！

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
你不知道的angularJs内置directive（一）

angualr directive 的directive有很多，平时用的比较多ng-click，ng-if,ng-repeat等，那面下面来说下不怎么经常用的ng directive,好了话不多说，直接进入正题！1.ng-change作用：当用户更改输入时或者当输入值的变化时候，会触发ng-change事件该指令必须ngModel同时使用<!DOCTYPE html><html lang="en" ng-app='changeExample'><head&gt
复制链接

扫一扫