Angular指令学习-简单介绍

最新推荐文章于 2020-05-29 09:55:43 发布

smile_spart

最新推荐文章于 2020-05-29 09:55:43 发布

阅读量799

点赞数

分类专栏： AngularJs入门文章标签： Angular指令

本文链接：https://blog.csdn.net/smile_spart/article/details/78614684

版权

AngularJs入门专栏收录该内容

3 篇文章 0 订阅

订阅专栏

1.ng-app

ng-app指令是用来告诉应用程序当前元素是根元素；所有的Angular应用程序都必须要有一个根元素；一个html文档中只能有一个ng-app指令，如果出现多个ng-app指令，应用程序只会执行第一个，若想让除了第一个以外的ng-app也执行，请看本人博客中“AngularJs一个页面多个ng-app的问题"。

2.ng-bind

把元素和应用程序绑定

ng-bind和{{ }}加载的区别：

{{ }}是在页面加载完之后才会取数据值， ng-bind也是在页面加载完之后取值

不同的是如果页面加载的比较慢，{{ name }}加载的数据还没有出来，用户就可以看到模板渲染的结构，而ng-bind="name"就不会出现这样的问题，所以建议使用ng-bind。

3.ng-bind-html

以一种安全的方式把元素绑定到应用程序

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/angular.js/1.4.6/angular.min.js"></script>
<script src="https://cdn.bootcss.com/angular.js/1.5.0-beta.0/angular-sanitize.min.js"></script></head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
    <p ng-bind-html="myText"></p>
</div>
<script>
var app = angular.module("myApp", ['ngSanitize']);
app.controller("myCtrl", function($scope) {
    $scope.myText = "My name is: <h1>John Doe</h1>";   //可以将<h1>标签移除并显示它的样式
});
</script>
</body>
</html>

4.ng-bind-template

将指定表达式的值替换成html元素的值，ng-bind-template的值可以用一个或者多个{{}}表示（多个之间以空格隔开）

ng-init:初始化数据

ng-model:将元素绑定到应用上

5.ng-blur（相当于onblur）

输入框失去焦点时执行的表达式：

<body ng-app="">
    <input ng-blur=" count = count+1 " ng-init = "count=0"/>
    <p>{{ count }}</p>
</body>

<a>, <input>, <select>, <textarea>,窗口对象支持。

而且AngularJS 中的ng-blur 指令不会覆盖原生的 onblur 事件，如果触发该事件，ng-blur表达式与原生的 onblur 事件都会执

行。

ng-focus:元素获取焦点时执行的动作

<body ng-app="">
    <input ng-focus="count=count+1" ng-init="count=0"/>
    <p>获取焦点{{count}}次</p>
    <p>输入框每次获取焦点时执行的动作</p>
</body>

6.ng-change

元素内容改变执行的操作：在值的每次改变时触发，它不需要等待一个完成的修改过程，或等待失去焦点的动作

<body ng-app="myApp">
    <div ng-controller="myCtrl">
        <input type="text" ng-change="myFunc()" ng-model="myValue"/>
        <p>输入框改变{{count}}次</p>
        <p>{{ myValue }}</p>
    </div>

    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',['$scope',function($scope){
            $scope.count = 0;
            $scope.myFunc = function(){
                $scope.count++;
            }
        }]);
    </script>
</body>

<input>, <select>, 和 <textarea> 元素支持。

ng-change可以结合ng-model一起使用，ng-change指令不会覆盖原生的 onchange 事件

7.ng-checked:元素是否被选中

点击选中所有的

<body ng-app="">
    <p>My:多选按钮</p>
    <input type="checkbox" ng-model="all"/>Check All<br><br>
    <input type="checkbox" ng-checked="all"/>Volvo<br>
    <input type="checkbox" ng-checked="all"/>Fored<br>
    <input type="checkbox" ng-checked="all"/>Mercedes<br>    
        <p>单选按钮</p>
    <input type="radio" name="sex" ng-model="sex" ng-checked="sex==true"/>男
    <input type="radio" name="sex" ng-model="sex" ng-checked="sex"/>女
</body>

8. ng-class:指定的元素绑定css样式

<head>
    <meta charset="UTF-8">
    <script src="https://code.angularjs.org/1.4.6/angular.js"></script>
    <style>
        .sky{
            color:white;
            background: lightblue;
            padding:20px;
            font-family: "Courier New";
        }
        .tomato{
            background-color: coral;
            padding:40px;
            font-family: Verdana;
        }
    </style>
</head>
<body ng-app="">
    <select ng-model="home">
        <option value="sky">sky</option>
        <option value="tomato">tomato</option>
    </select>
    <div ng-class="home">
        <h2>Welcome Home!</h2>
        <p>I like it!</p>
    </div>
</body>

9.ng-class-even：只在偶数行添加样式
ng-class-odd：只在奇数行添加样式
需要结合no-repeat指令使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <script src="https://code.angularjs.org/1.4.6/angular.js"></script>
    <style>
        .striped{
            color:white;
            background-color:salmon;
        }
        .striped1{
            color:palevioletred;
            background-color: #D4CECE;
        }
    </style>
</head>
<body ng-app="myApp">
    <table ng-controller="myCtrl">
        <tr ng-repeat="x in records" ng-class-even="'striped'" ng-class-odd="'striped1'">
            <td>{{x.Name}}</td>
            <td>{{x.Country}}</td>
        </tr>
    </table>
    <script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.records = [
                {
                    "Name":"Wu",
                    "Country":"Smith"
                },
                {
                    "Name":"BoLan",
                    "Country":"Sweden"
                },
                {
                    "Name":"Allis",
                    "Country":"Indi"
                },
                {
                    "Name":"SiChuan",
                    "Country":"China"
                }
            ]
        });
    </script>
</body>
</html>

10.ng-click:点击事件，所有 HTML 元素都支持该指令

<body ng-app="">
    <button ng-click="count=count+1" ng-init="count=0">点击</button>
    {{ count }}
</body>
     ng-dblclick:双击事件，所有 HTML 元素都支持该指令
<body ng-app="">
    <button ng-dblclick="count=count+1" ng-init="count=0">点击</button>
    {{ count }}
</body>

11.ng-cloak:防止代码未加载完而出现的闪烁问题

<body ng-app="">
    <button ng-click="count=count+1" ng-init="count=0">点击</button>
    <p ng-cloak>{{ count }}</p>
    <p ng-cloak>{{ 5 + 5 }}</p>
</body>

12.ng-controller
为应用添加控制器，在控制器中可以通过$scope对象写函数、变量

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        FullName:{{ firstName + lastName }}
    </div>
    <script type="text/javascript">
        var app = angular.module("myApp",[]);
        app.controller("myCtrl",function($scope){
            $scope.firstName = "Wu";
            $scope.lastName = "Smith";
        });
    </script>
</body>

13.ng-copy：元素被拷贝的时候要执行的操作，适用于所有的html元素

<body ng-app="">
    <input ng-copy="count=count+1" ng-init="count=0" value="拷贝这个文本"/>
    <p>文本被拷贝{{count}}次</p>
    <p>拷贝input文本框中的文档时执行的操作</p>
</body>
     ng-cut:元素被剪切的时候要执行的操作，<a>, <input>, <select>, <textarea>, 及窗口对象都支持该指令
<body ng-app="">
    <input ng-cut="count=count+1" ng-init="count=0" value="剪切这个文本"/>
    <p>文本被剪切{{count}}次</p>
    <p>剪切input文本框中的文档时执行的操作</p>
</body>

14.ng-disable：规定一个元素是否被禁用

<body ng-app="">
    禁用表单输入域：<input type="checkbox" ng-model="all"/><br>
    <input type="text" ng-disabled="all"/>
    <input type="text" ng-disabled="all">
    <select ng-disabled="all">
        <option>Female</option>
        <option>Male</option>
    </select>     <textarea ng-disabled="all"></textarea>
 <button ng-disabled="all">按钮</button>
</body>

15.ng-hide:显示或隐藏元素

<body ng-app="">
    隐藏html：<input type="checkbox" ng-model="myVar"/>
    <div ng-hide="myVar">
        <h3>Welcome</h3>
        <p>Welcome to my home.</p>
    </div>
</body>

ng-if:表达式为 false 时移除 HTML 元素，表达式为true时添加元素

<body ng-app="">
    保留html：<input type="checkbox" ng-model="myVar" ng-init="myVar=true"/>
    <div ng-if="myVar">
        <h3>Welcome</h3>
        <p>Welcome to my home.</p>
    </div>
</body>

ng-show:在表达式为 true 时显示指定的 HTML 元素，否则隐藏指定的 HTML 元素

<body ng-app="">
    显示html: <input type="checkbox" ng-model="myVar">
    <div ng-show="myVar">
        <h3>Welcome</h3>
        <p>Welcome to my home.</p>
    </div>
</body>

区别：ng-if 指令不同于 ng-hide， ng-hide 隐藏元素，而ng-if 是从 DOM 中移除元素

16.ng-href:为元素指定链接

<body ng-app="">
    <div ng-init="myVar='http://blog.csdn.net/smile_spart?ref=toolbar'">
        <p>访问<a ng-href="{{ myVar }}">{{ myVar }}</a>学习！！</p>
    </div>
</body>

17.ng-include:包含文件

18.ng-keydown

<body ng-app="">
    <input ng-keydown="count = count + 1" ng-init="count=0" />
    <h3>按下按键时执行，第{{count}}次</h3>
</body>

ng-keypress

<body ng-app="">
    <input ng-keypress="count = count + 1" ng-init="count=0" />
    <h3>按下按键时执行，第{{count}}次</h3>
</body>

ng-keyup

body ng-app="">
    <input ng-keyup="count = count + 1" ng-init="count=0" />
    <h3>按下按键时执行，第{{count}}次</h3>
</body>

均为按下按键时执行的动作，按键敲击的执行顺序如上顺序从上到下

19.ng-list:将字符串转为数组，字符转之间并用逗号隔开

<body ng-app="">
    <p>在文本框中输入值并用逗号隔开</p>
    <input ng-model="customers" ng-list/>
    <pre>{{ customers }}</pre>
</body>

20.ng-model-options:绑定表单元素到scope变量中

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <input ng-model="name" ng-model-options="{ updateOn:'blur' }"/>
        {{ name }}
    </div>
    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.name = 'John Done';
        });
    </script>
</body>

ng-model-options的值如下：

21.ng-mousedown

<body ng-app="">
    <div ng-mousedown="count=count+1" ng-init="count=0">点击</div>
    <h3>鼠标点击后执行的动作，第{{ count }}次</h3>
</body>

ng-mouseup

<body ng-app="">
    <div ng-mouseup="count=count+1" ng-init="count=0">点击</div>
    <h3>鼠标点击后执行的动作，第{{ count }}次</h3>
</body>

ng-click

<body ng-app="">
    <div ng-click="count=count+1" ng-init="count=0">点击</div>
    <h3>鼠标点击后执行的动作，第{{ count }}次</h3>
</body>

均为鼠标在指定的元素上按下时候要执行的操作，执行顺序按上面顺序从上到下

ng-mouseenter：鼠标指针穿过元素时执行的动作

<body ng-app="">
    <div ng-mouseenter="count=count+1" ng-init="count=0">点击</div>
    <h3>鼠标指针穿过元素时执行的动作，第{{ count }}次</h3>
</body>

ng-mouseleave：鼠标指针离开元素时执行的动作

<body ng-app="">
    <div ng-mouseleave="count=count+1" ng-init="count=0">点击</div>
    <h3>鼠标指针离开元素时执行的动作，第{{ count }}次</h3>
</body>

ng-mousemove：鼠标指针在指定的元素中移动时执行的动作

<body ng-app="">
    <div ng-mousemove="count=count+1" ng-init="count=0">点击</div>
    <h3>鼠标指针在指定的元素中移动执行的动作，第{{ count }}次</h3>
</body>

ng-mouseover：鼠标指针在元素上方时执行的动作

<body ng-app="">
    <div ng-mouseover="count=count+1" ng-init="count=0">点击</div>
    <h3>鼠标指针在元素上方时执行的动作，第{{ count }}次</h3>
</body>

ng-mouseup：松开元素上的鼠标按钮时执行的动作

<body ng-app="">
    <div ng-mouseup="count=count+1" ng-init="count=0">点击</div>
    <h3>松开鼠标按钮在元素上时执行的动作，第{{ count }}次</h3>
</body>

22. ng-non-bindable：指定元素或子元素不能绑定数据

<body ng-app="">
    <p ng-non-bindable>此元素不需要使用Angular{{ 5+5 }}</p>
</body>

23.ng-open：设置details列表的open属性

<body ng-app="">
    点击显示details列表：<input type="checkbox" ng-model="showDetails"/><br>
    <details ng-open="showDetails">
        <summary>技术、梦想</summary>
        <p>学习网址</p>
    </details>
</body>

24.ng-options：在<select>列表中指定<options>

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <select ng-model="selectName" ng-options="item for item in names"></select><br/>
        select下拉框中选中的值为：{{ selectName }}
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.names = ["Email","QQ","WeChat"];
        });
    </script>
</body>

25.ng-paste：粘贴文本

<body ng-app="">
    <input ng-paste="count=count+1" ng-init="count=0" value="粘贴文本到这里"/>
    <p>粘贴文本到文本框中次数，第{{ count }}次</p>
</body>

26.ng-readonly：指定元素的可读属性，如果 ng-readonly 属性的表达式返回 true 则表单域为只读

<body ng-app="">
    指定元素的readonly属性：<input type="checkbox" ng-model="all"/>
    <input type="text" ng-readonly="all"/><hr>
    该文本框可读：<input type="text" ng-readonly="true"/><br>
    该文本框可写：<input type="text" ng-readonly="false"/>
</body>

27.ng-reapt：定义集合中每项数据的模板

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <p ng-repeat="x in names">{{ x }}</p>
    </div>
    <script>
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.names = ["11","22","33"];
        });
    </script>
</body>

28.ng-selected：设置元素的默认选中属性

<body ng-app="">
    点击复选框并选中绑定的值：<input type="checkbox" ng-model="mySel"/>
    <p>我喜欢：</p>
    <select>
        <option>run</option>
        <option ng-selected="mySel">music</option>
        <option ng-selected="true">study</option>
    </select>
</body>

29.ng-src：覆盖了 <img> 元素的 src 属性，确保的 AngularJS 代码执行前不显示图片

<body ng-app="">
    <div>
        <img ng-src="../img/1.png"/>
    </div>
</body>
     ng-srcset：
<body ng-app="">
    <div>
        <img ng-srcset="../img/1.png"/>
    </div>
</body>

30.ng-style：指定元素的样式，
ng-style 属性值必须是对象，表达式返回的也是对象；对象由 CSS 属性和值组成，即 key=>value 对

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <h3 ng-style="myStyle">welcome</h3>
    </div>
    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.myStyle = {
                "color":"white",
                "background-color":"coral",
                "font-size":"60px",
                "padding":"50px"
            }
        });
    </script>
</body>

31.ng-submit：onsubmit时间发生后执行的动作

<body>
    <div ng-app="myApp" ng-controller="myCtrl">
        <form ng-submit="myFunc()">
            <input type="text">
            <input type="submit">
        </form>
        <p>{{ myText }}</p>
    </div>
    <script type="text/javascript">
        var app = angular.module('myApp',[]);
        app.controller('myCtrl',function($scope){
            $scope.myText = "你还没有点击提交";
            $scope.myFunc = function(){
                $scope.myText = "你点了提交了";
            }
        });
    </script>
</body>

32.ng-switch：显示或隐藏子元素的条件

<body ng-app="">
    选择网址：
    <select ng-model="myVar">
        <option value="baidu">www.baidu.com</option>
        <option value="google">www.google.com</option>
        <option value="blog">http://blog.csdn.net/</option>
    </select>
    <hr>
    <div ng-switch="myVar">
        <div ng-switch-when="baidu">
            <h3>百度</h3>
            <p>欢迎访问百度</p>
        </div>
        <div ng-switch-when="google">
            <h3>谷歌</h3>
            <p>欢迎访问谷歌</p>
        </div>
        <div ng-switch-when="blog">
            <h3>博客</h3>
            <p>欢迎访问博客</p>
        </div>
        <div ng-switch-default>
            <h3>切换网址</h3>
            <p>根据不同的选项显示不同的值</p>
        </div>
    </div>
</body>

33.ng-value：规定input元素的值

smile_spart

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Angular指令学习-简单介绍

1.ng-app ng-app指令是用来告诉应用程序当前元素是根元素；所有的Angular应用程序都必须要有一个根元素；一个html文档中只能有一个ng-app指令，如果出现多个ng-app指令，应用程序只会执行第一个，若想让除了第一个以外的ng-app也执行，请看本人博客中“AngularJs一个页面多个ng-app的问题"。2.ng-bind 把元素和应
复制链接

扫一扫

专栏目录