AngularJS 指令详解

AngularJS 指令详解

ng-app 指令

ng-app指令用于指定angularJS应用当前元素为根元素

所以AngularJS应用都必须要有一个根元素

而且HTML文档中只允许出线一个ng-app指令，如果出现多个ng-app指令，则只有第一个会被使用。

<body ng-app="">
</body>

ng-bind指令

ng-bind 指令告诉AngularJS使用给定的变量或者表达式的值来替换HTML元素的内容，如果给定的变量或者表达式的值修改了，对应的HTML元素也会修改。所有的HTML元素都支持该指令。

或者

1 <div ng-app="" ng-init="myText='Hello World!'">
2 <p ng-bind="myText"></p>
3 </div>

ng-bind-html 指令

ng-bind-html指令是通过一个安全的方式将编辑的html内容绑定到html元素上。

当你想通过AngularJS在你的应用中写入html，需要检测一些危险的代码，通过“angular-santize.js”模块，使用ngSanitize函数来检测代码的安全性。

 <p ng-bind-html="myText"></p>

 $scope.myText = "My name is: <h1>Tom</h1>";

ng-bind-template指令

ng-bind-template指令用于将指定表达式的内容替换为HTML元素内容，当你想在html元素上绑定多个表达式时可以使用ng-bind-template指令

  <div ng-init="name='张三';age='18'" ng-bind-template="我是{{name}}，今年{{age}}岁"></div>

ng-blur指令

ng-blur指令在元素失去焦点时执行表达式，ng-blur指令不会覆盖原生的onblur事件，如果触发该事件，ng-blur表达式和原生的onblur时间都会执行。

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

1 <button ng-init="count=0" ng-blur="count=count+1" onblur="alert('不好意思我只是执行了onblur事件！')">我是onblur的事件元素 <span>{{count}}</span></button>

ng-change指令

ng-change指令在html元素改变时执行，ng-change指令需要搭配ng-model指令一起使用，ng-change不会覆盖原生的onchange事件；

ng-change事件在值每次修改时触发，不需要等待完成的过程，或者等待失去焦点的过程。

ng-change事件只针对输入框值得真实修改，而不是通过javaScript来修改的。

支持对象：<input> <select> <textarea>元素

1 <input type="text" ng-change="Change()" ng-model="myvalue" />
2 change事件执行次数：{{changeCount}}
3 
4 $scope.changeCount = 0;
5  $scope.Change = function () {
6       $scope.changeCount++;
7 }

ng-checked 指令

ng-check指令用于设置复选框和单选按钮的checked属性，

如果ng-checked属性返回true，复选框checkbox或单选按钮radio将会被选中；

1 <div>
2  <p>汽车品牌(复选)</p>
3  <input type="checkbox" ng-model="carCheck" />全选
4  <input type="checkbox" ng-checked="carCheck">福特
5  <input type="checkbox" ng-checked="carCheck">雪佛兰
6  <input type="checkbox" ng-checked="carCheck">一汽
7  <input type="checkbox" ng-checked="carCheck">广汽本田
8  <p>点击全选 选择全部品牌</p>
9 </div>

ng-class指令

ng-class指令用于给html元素动态绑定一个或者多个CSS类。
ng-class 的值可以是字符串，对象或者一个数组。

如果是字符串，多个类名之间使用空格分开。

如果是对象需要使用key-value对，key为类名，value是一个布尔值只有value=true时才会被添加。

如果是数组，数组元素可以是字符串或者对象。

expression 返回一个或多个类名

<style>
        .sky {
            background-color: lightblue;
        }

        .tomato {
            background-color: coral;
        }
</style>
<div>
            <p>请选择一个样式</p>
            <select ng-model="home">
                <option>sky</option>
                <option>tomato</option>
            </select>
            <div ng-class="home">
                <h1>Welcome home</h1>
                <p>这是ng-clas指令示例</p>
            </div>
 </div>

<style>
.sky {
    background-color: lightblue;
}

.tomato {
    background-color: coral;
}
</style>

<div class="frame">
   <p>请选择一个样式</p>
   <select ng-model="home">
       <option>sky</option>
       <option>tomato</option>
   </select>
   <div ng-class="home">
       <h1>Welcome home</h1>
       <p>这是ng-clas指令示例</p>
   </div>
 </div>

ng-class-even指令

ng-class-even指令为html动态绑定一个或多个css，但是只作用于偶数行。

ng-class-even 指令需要搭配ng-repeat指令使用。

ng-class-even 指令建议使用在表格的样式渲染中，其他所有的html元素都是支持的。

ng-class-odd指令

ng-class-odd指令为html动态绑定一个或多个css，但是只作用于奇数行。

ng-class-odd 指令需要搭配ng-repeat指令使用。

ng-class-odd 指令建议使用在表格的样式渲染中，其他所有的html元素都是支持的。

ng-repeat指令

用于循环输出指定HTML元素，集合必须是数组或对象。

<div  ng-init="records=['记录1','记录2','记录3','记录4']">
            <h3 ng-repeat="x in records">{{x}}</h3>
</div>

 1 <style>
 2 .sky {
 3      background-color: lightblue;
 4 }
 5 
 6 .tomato {
 7     background-color: coral;
 8 }
 9 
10 .even {
11      color: red;
12 }
13 
14 .odd {
15     color: aqua;
16 }
17 </style>
18 
19 <div>
20     <table>
21         <tr>
22             <td>姓名</td>
23             <td>联系电话</td>
24         </tr>
25         <tr ng-repeat="x in records" ng-class-even="'even tomato'" ng-class-odd="'odd'">
26             <td>{{x.name}}</td>
27             <td>{{x.tel}}</td>
28          </tr>
29     </table>
30 </div>    
31 
32  $scope.records = [{
33     "name": "张三",
34     "tel": "18515151515"
35 }, {
36    "name": "李四",
37    "tel": "18515151511"
38  }, {
39    "name": "王五",
40    "tel": "18515151512"
41 } ];

ng-click指令

元素执行单击事件触发表达式

我被点击{{clickCount}}次<input type="button" ng-click="clickCount=clickCount+1" value="你点击我试试" />

ng-controller指令

ng-controller指令用于为应用程序添加控制器

在控制器中可以添加代码，添加函数和变量，并使用scope对象来访问。

<div ng-app="myApp" ng-controller="myCtrl">
</div>
 var app = angular.module("myApp", );
 app.controller("myCtrl", function ($scope) {
      //逻辑代码
}

ng-csp指令

ng-csp指令用于修改AngularJS的安全策略。

如果使用了ng-csp指令，AngularJS将不会执行eval函数，这样就无法注入内联样式。

设置ng-csp指令为no-unsafe-eval,将阻止AngularJS执行eval函数，但允许注入内联样式。

设置ng-csp指令为no-inline-style，将阻止AngularJS注入内联样式，但允许执行eval函数。

备注：ng-csp指令不会影响javaScript，但会修改angularJS的工作方式；

ng-cut指令

剪切时执行

 <input ng-cut="cutcount=cutcount+1" ng-init="cutcount=0" value="剪切这个文本" />  文本被剪切了{{cutcount}}次

ng-copy指令

复制时执行

<input ng-copy="copycount=copycount+1" ng-init="copycount=0" value="复制这个文本" />文本被复制了{{copycount}}次

Ng-paste指令

<input ng-paste="pastecount=pastecount+1" ng-init="pastecount=0" value="在这粘贴" />  文本被粘贴了{{pastecount}}次

ng-dblclick指令

双击时执行

<input ng-dblclick="dblcount=dblcount+1" ng-init="dblcount=0" value="双击我" type="text" />   双击了{{dblcount}}次

ng-disabled 指令

禁用/启用元素

<input type="checkbox" ng-model="allDisable" />是否禁用

<input type="text" ng-disabled="allDisable" />

<input type="radio" ng-disabled="allDisable" />

ng-focus指令

获取焦点后执行表达式

<input type="text" ng-focus="focusCount =focusCount+1" /> 获取焦点次数{{focusCount}}

ng-hide指令

ng-hide 指令在表达式为true时隐藏html元素

作为css类使用

<div class="frame">
    隐藏html<input type="checkbox" ng-model="myHide">
    <div class="ng-hide">我是隐藏class</div>
    <div ng-hide="myHide">
        <h1>Welcome</h1>
    </div>
</div>

ng-href指令

ng-href指令覆盖了原生<a>元素的href属性。

<a ng-init="nghref='http://www.baidu.com'" href="http://www.sina.com" ng-href="{{nghref}}">前往百度</a><br />

ng-if 指令用于在表达式为false时候移除html元素，如果为true会添加被移除的元素并显示。

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

<div >
    <label><input type="checkbox" ng-model="myif" />选择我可以删除或添加元素</label> 
    <div ng-if="myif">
        <H1>Hello 我是ng-if指令</H1>
    </div>
</div>

ng-include指令

用于指定包含外部的HTML文件，包含的内容作为指定元素的子节点，ng-include属性的值可以是一个表达式，返回一个文件名。默认情况下需要包含在同一个域名下的文件。

或者ng-include指令作为元素使用

<ng-include src=”filename” onload=”expression” autoscroll=”expression”> </ng-include>

ng-init指令

ng-init指令初始化执行给定的表达式。

 <div ng-init="initCount=100">我是initCount：{{initCount}}</div>

ng-keydown指令

表示在指定HTML元素上按下按键时需要的操作，不会覆盖原生的onkeydown事件。

<input ng-keydown="keydownCount =keydownCount+1" ng-init="keydownCount=0" /> keydown执行次数{{keydownCount}}

ng-keypress指令

表示在指定HTML元素上按下按键时需要的操作，不会覆盖原生的onkeypress事件。

<input ng-keypress="keypressCount =keypressCount+1" ng-init="keypressCount=0" />keypress执行次数{{keypressCount}}

ng-keyup指令

表示在指定HTML元素上松开按键时需要的操作，不会覆盖原生的onkeyup事件。

<input ng-keyup="keyupCount =keyupCount+1" ng-init="keyupCount=0" />keyup执行次数{{keyupCount}}

按键敲击事件顺序：1.keydown 2.keypress 3.keyup

ng-list指令

ng-list指令将字符串转换为数组，并使用都好分隔开。

<input> <select> <textarea>和其他可编辑指令都支持

<input ng-model="list" ng-list />{{list}}

ng-model指令

ng-model指令绑定了HTML元素到scope变量中，如果在scope中不存在该变量，则创建该变量。

绑定变量值

<body ng-app="myApp" ng-controller="myCtrl">
    <!--ng-model指令 绑定变量-->
    <div class="frame">
        姓名：<input ng-model="name" />
    </div>
    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.name = "张三";
        });
    </script>
</body>

双向数据绑定

<body ng-app="myApp" ng-controller="myCtrl"> 
    <!--双向绑定-->
    <div class="frame">
        姓名：<input ng-model="name" />
        <h1>你输入的内容是：{{name}}</h1>
    </div>

    <script>
        var app = angular.module("myApp", []);
        app.controller("myCtrl", function ($scope) {
            $scope.name = "张三";
        });
    </script>
</body>

Ng-model-option指令

绑定数据触发的时间，或者指定等待时间（毫秒）

Option : 绑定规则如下：

{updateOn:’event’}规则指定事件发生后绑定数据

{debounce:1000}等待多少毫秒后绑定数据

{allowInvalid:true|false}是否需要验证后绑定数据

{getterSetter:true|false}规定是否作为getters/setters绑定模型

{timezone:’0100’}规则是否使用时区

<input ng-model="modelname1" />{{modelname1}}
<input ng-model="modelname2" ng-model-options="updateOn:'blur',debounce:1000}" />{{modelname2}}

ng-mousedown指令

鼠标按下时要执行的操作，不会覆盖元素的onmousedown事件。

<input ng-mousedown="mousedownCount=mousedownCount+1" ng-init="mousedownCount=0" />Mousedown执行次数{{mousedownCount}}

ng-mouseup指令

鼠标松开时执行的操作，不会覆盖元素的onmouseup事件

<input ng-mouseup="mouseupCount=mouseupCount+1" ng-init="mouseupCount=0" />mouseup执行次数{{mouseupCount}}

事件执行顺序：1.mousedown 2.mouseup 3.click

ng-mouseenter指令

鼠标在HTML元素穿过时执行的操作，不会覆盖onmouseenter事件

<input ng-mouseenter="mouseenterCount=mouseenterCount+1" ng-init="mouseenterCount=0" />mouseenter执行次数{{mouseenterCount}}

ng-mouseleave指令

鼠标从HTML元素上移开时要执行的操作，不会覆盖onmouseleave事件。

<input ng-mouseleave="mouseleaveCount=mouseleaveCount+1" ng-init="mouseleaveCount=0" />mouseleave执行次数{{mouseleaveCount}}

ng-mousemove指令

鼠标在HTML元素上移动时要执行的操作，不会覆盖onmousemove事件。

<input ng-mousemove="mousemoveCount=mousemoveCount+1" ng-init="mousemoveCount=0" />mousemove执行次数{{mousemoveCount}}

ng-mouseover指令

鼠标移动到指定HTML元素上要执行的操作，不会覆盖onmouseover事件。

<input ng-mouseover="mouseoverCount=mouseoverCount+1" ng-init="mouseoverCount=0" />Mouseover执行次数{{mouseoverCount}}

ng-non-bindable指令

用于告诉AngularJS当前的HTML元素或其子元素不需要编译。

<p ng-non-bindable>这个代码不需要使用 AngularJS: {{ 5+5 }}</p>

ng-open指令

用于设置details列表的open属性，如果ng-open的表达式返回true则details列表是可见的。

<label><input type="checkbox" ng-model="showDetails" />打开详细列表</label>
<details ng-open="showDetails">
         <summary>Details列表标题</summary>
         <p>列表内容</p>
</details>

ng-options指令

用于使用<options>填充<select>元素的选项

ng-options 指令用数组来填充下拉列表。

<select ng-init="selectNames = ['张三', '李四', 'tom', 'sam']" ng-model="nn"  ng-options="item for item in selectNames"> </select>

ng-src指令

覆盖了<img> 元素的src属性

<img ng-src="img/img1.jpg" />

ng-srcset指令

覆盖了<img>元素的srcset属性

<img ng-srcset="img/img2.jpg" />

ng-style指令

为HTML元素添加style属性，属性值为对象，返回值也是对象，由css中的属性和值组成。

<div ng-init="style1={'height':'100px','background-color':'red','color':'lightblue'}" >
    <div ng-style="{{style1}}">
        你好我是ng-style指令,红色背景，浅蓝色字体。100px高度
    </div>
</div>

ng-submit指令

用于在表单提交后执行指定的函数

 1 <form ng-submit="MyFunc()">
 2     <input type="text" />
 3     <input type="submit" value="提交" />
 4     {{submitText}}
 5 </form>
 6 
 7 $scope.submitText = "未提交";
 8 $scope.MyFunc = function () {
 9      $scope.submitText = "已提交";
10 }

ng-switch指令 ng-switch-when指令 ng-switch-default指令

根据表达式显示或隐藏对应的部分，读音的子元素使用ng-switch-when指令，如果匹配选中显示，其他为匹配的则移除，

可以通过ng-switch-default指令设置默认选项，如果都没有匹配的情况，默认选项会显示。

 1 <select ng-model="myselected">
 2     <option value="sina">ww.sina.com</option>
 3     <option value="baidu">ww.baidu.com</option>
 4     <option value="google">ww.google.com</option>
 5 </select>
 6 
 7 <div ng-switch="myselected">
 8     <div ng-switch-when="sina">
 9         <p>欢迎访问新浪</p>
10     </div>
11     <div ng-switch-when="baidu">
12         <p>欢迎访问百度</p>
13     </div>
14     <div ng-switch-when="google" >
15         <p>欢迎访问谷歌</p>
16     </div>
17     <div ng-switch-default>
18         <p>默认选项</p>
19     </div>
20 </div>

ng-value指令

用于设置input或select元素的value属性

<input ng-value="myval" type="text" />

ng-true-value指令 ng-false-value指令

当我们点击checkbox选中复选框是ng-model的值是true 对应ng-true-value值，取消选择为false 对应ng-false-value值；

<input ng-model="checkboxModel" type="checkbox" ng-true-value="'true 选中'" ng-false-value="'false 没有选中'"> {{checkboxModel}}

posted @ 2017-04-12 16:58 Ｗǒ々啊申々阅读(385) 评论(0) 编辑收藏举报

刷新页面返回顶部

Ｗǒ々啊申々

AngularJS 指令详解

公告