目录：

$rootScope，ng-app，.run()，ng-include，ng-repeat，ng-if，ng-switch，ng-init

ng-show/ng-hide，ng-model，ng-bind-template，ng-change，ng-submit，ng-cloak，ng-bind

详细介绍：

$rootScope

是作用域链的起始点，任何嵌套在ng-app内的指令都会继承$rootScope

ng-app

任何具有ng-app属性的dom元素都将被标记为$rootScope的起始点

.run()

.run()可以通过此方法来访问/设置$rootScope

ng-include

把外部的html片段包含到当前元素里作为当前元素的子元素。还可以规定作用域，写法看下面代码，注意外部文件地址的引号的写法，跨域的文件不可以引入哦

<body>

<!--注意外部文件地址的引号-->

<div ng-include="'htmlhtml.html'"

     ng-controller="myController"

     ng-init="name='world'"

        >

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

            })

</script>

</body>

ng-repeat

用来遍历数组或者对象。

<!DOCTYPE html>

<html ng-app="myApp">

<head lang="en">

    <meta charset="UTF-8">

    <title></title>

    <script src="../../Angular/angular.min.js"></script>

    <style>

        .odd{

            background:greenyellow;

        }

        .even{

            background:grey;

        }

    </style>

</head>

<body>

<div ng-controller="myController">

    <table width="100%"border="0">

        <!-- 注意添加class的两个引号-->

        <tr ng-repeat="v in objData" ng-class-even="'even'" ng-class-odd="'odd'">

            <td>{{v.name}}</td>

            <td>{{v.age}}</td>

            <td>{{v.score}}</td>

        </tr>

    </table>

    <ul>

        <!-- 被遍历的数组有重复元素，是不会被遍历出来的，下面的写法是根据下标遍历数组，所以重复的就会被遍历出来-->

        <li ng-repeat="v in arr track by $index">{{v}}</li>

    </ul>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.objData = [

                    {name:'小梦',age:'19',score:'104'},

                    {name:'北京',age:'20',score:'103'},

                    {name:'山西',age:'12',score:'102'},

                    {name:'天安门',age:'21',score:'101'}

                ];

                $scope.arr = [1,3,2,1,1,2,3,4]

            })

</script>

</body>

</html>

ng-if

可以完全根据表达式返回的布尔值在dom中生成或移除一个元素，false移除，true生成。移除的时候不管对该元素做过什么设置，当再次生成的时候这些设置都不在了，就像恢复了出厂设置一样。

<body>

<!--这个div会被移除-->

<div ng-if="2+2 == 5">

    我是给ng-if返回false的div

</div>

<div ng-if="2+2 == 4">

    我是给ng-if返回true的div

</div>

<script>

    angular.module("myApp",[])

</script>

</body>

ng-switch

ng-switch ng-switch-when ng-switch-default就像switch语句一样使用

<body>

<div>

    <input type="text" ng-model="person.name"/>

    <!-- on 就好像是switch语句的参数一样  而ng-switch-when 就像是 case一样 -->

    <div ng-switch on="person.name">

        <p ng-switch-default>default</p>

        <p ng-switch-when="Air">{{person.name}}</p>

    </div>

</div>

<script>

    angular.module("myApp",[])

</script>

ng-init

设置内部作用域的初始值。

<body>

<div ng-init="name='大厨的笔记';age='25'">

    <p>{{name}}{{age}}岁啦</p>

</div>

<script>

    angular.module("myApp",[])

</script>

</body>

ng-show/ng-hide

根据条件返回的布尔值 显示或隐藏元素

<body>

　　<div ng-show="2+2 == 4">

    　　第一个div  2+2 == 4 ng-show

　　</div>

　　<div ng-hide="2+2 == 4">

    　　第二个div 2+2 == 4  ng-hide

　　</div>

<script>

    angular.module("myApp",[])

</script>

ng-model

用来将input select textarea 或自定义表单控件同包含它们的作用域中的属性进行绑定

<body>

<!--双向数据绑定，视图与控制器的数据保持一致-->

<div ng-controller="myController">

    <input type="text" ng-model="data"/>

    <p>{{data}}</p>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.data = 1;

            })

</script>

ng-change

在表单输入发生变化时触发。要配合ng-model使用

<body>

<div ng-controller="myController">

    <input type="text" ng-model="data.mo" ng-change="change()"/>

    <p>{{data.child}}</p>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.data = {};

                $scope.change = function(){

                    $scope.data.child = parseInt($scope.data.mo)+2;

                }

            })

</script>

</body>

ng-submit

用来将表达式同onsubmit事件进行绑定，这个指令会阻止默认发送请求，前提是form没有action属性

ng-bind

在使用 {{ }} 绑定数据时在数据没有加载出来时会发生闪烁的现象，使用ng-bind来绑定数据不会出现闪烁的问题

<!--这样不会有闪烁的现象-->

<div ng-controller="myController">

    <div ng-bind="data"></div>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                    $scope.data = '大厨的笔记';

            })

</script>

ng-cloak

除了用ng-bind来解决闪烁问题外，还可以用ng-cloak来解决，它会将内部元素隐藏，直到数据出来后才显示内部元素

<body>

<div ng-controller="myController">

    <p ng-cloak>{{data}}</p>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.data = '大厨的笔记';

            })

</script>

</body>

ng-bind-template

同ng-bind指令类似，用来在视图中绑定多个表达式

<body>

<!--貌似这种写法在个别编辑器里会报错，但是不影响数据渲染-->

<div ng-controller="myController">

    <p ng-bind-template="{{data1}}{{data2}}"></p>

</div>

<script>

    angular.module("myApp",[])

            .controller("myController",function($scope){

                $scope.data1 = '大厨的笔记1';

                $scope.data2 = '大厨的笔记2';

            })

</script>

</body>

Angular内置指令（二）的更多相关文章

  1. angular内置指令相关知识

    原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...

  2. Angular内置指令（一）

    要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突  目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...

  3. Angular内置指令

    记录一下工作中使用到的一些AngularJS内置指令 内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...

  4. Angular——内置指令

    内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否 ...

  5. [转] Angular 4.0 内置指令全攻略

    [From] https://segmentfault.com/a/1190000010416792 简书链接 在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...

  6. Angular中的内置指令和自定义指令

    NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...

  7. angular内置过滤器-filter

    这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就 ...

  8. 浅谈Angularjs至Angular2后内置指令的变化

    一.科普概要说明 我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...

  9. AngularJS内置指令

    指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...

随机推荐

  1. linux vi(vim)常用命令汇总

    1 查找 /xxx(?xxx) 表示在整篇文档中搜索匹配xxx的字符串, / 表示向下查找, ? 表示向上查找其中xxx可以是正规表达式,关于正规式就不多说了. 一般来说是区分大小写的, 要想不区分大 ...

  2. linux 安装nexus

    1.下载nexus 的包,加压缩. 2.启动neuxs export RUN_AS_USER=root     ./nexus start

  3. 高程（3）：操作符、for、for...in循环、break/continue/return语句、函数等

    1.关系操作符 注意点:1)比较操作数是两个字符串,是比较字符串的字符编码值. 如:"a" > "b"  返回 false:"a" & ...

  4. test1.xlsx

    耿丹CS16-2班第三次作业汇总 排名 学号后三位 姓名 作业顺序 作业情况 第三周博客 总得分 博客园地址 1 232 周* 1 8.5 3 12.5 http://www.cnblogs.com/ ...

  5. vbs连接sql server及写文件操作

    此段代码是连接SQL SERVER的 代码内connMMSQL的参数要根据实际情况传入 Function connMMSQL(ip,user,pwd,database,strsql) Dim conn ...

  6. git服务器搭建总结

    1.软件选择 服务端软件:由于我对linux还不熟悉,而且公司用的都是windows,于是找到了bonobo,这是一个基于.net framework 4.5和.net mvc4的开源软件,iis7. ...

  7. Docker - 创建Swarm

    1. 准备 我们需要: Docker Engine 1.12 or later installed the IP address of the manager machine open ports b ...

  8. Excel2013 基本用法（下）

    排序 按行/列排序 选择单元格,点击"排序"(点击之后自动全选) 点击选项,弹出"排序选项",根据自己需要选择按行排序/按列排序. 输入排序条件. 确定. 复杂 ...

  9. 报错:1130-host ... is not allowed to connect to this MySql server

    报错:1130-host ... is not allowed to connect to this MySql server   解决方法: 1. 改表法. 可能是你的帐号不允许从远程登陆,只能在l ...

  10. 360随身wifi在win10中连不上网络

    找到服务"Wired AutoConfig"和"WLAN AutoConfig"项,点击"启动"按钮,确保使其正常启动. 讲本地网卡共享到移 ...