目录：

$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. Hadoop基础——第一弹：Hadoop介绍

    一.基础 1.了解Java.Linux操作系统相关知识 2.如需精进,应为水平要达到一定标准,能够阅读国外相关技术网站,eg:http://hadoop.apache.org/ 二.什么是Hadoop ...

  2. Altium Designer 的entry sheet ，offsheet和port作用（转载）

    1.图纸结构 图纸包括两种结构关系: 一种是层次式图纸,该连接关系是纵向的,也就是某一层次的图纸只能和相邻的上级或下级有关系: 另一种是扁平式图纸,该连接关系是横向的,任何两张图纸之间都可以建立信号连 ...

  3. eclipse安装spring的插件

    第一步:插件下载 http://spring.io/tools/sts/all 安装包链接 第二步:插件安装 第三步:安装成功检测

  4. Lamda表达式使用

    public class Lambda { public static void main(String[] args) { Lambda lambda=new Lambda(); String so ...

  5. Java与各种数据库连接代码

    6.MySQL数据库Class.forName("org.gjt.mm.mysql.Driver").newInstance();String url ="jdbc:my ...

  6. sublime text快捷键

    Ctrl+Shift+V:粘贴并格式化Ctrl+D:选择单词,重复可增加选择下一个相同的单词Ctrl+L:选择行,重复可依次增加选择下一行Ctrl+M:跳转到对应括号Ctrl+K+B:开关侧栏Ctrl ...

  7. overridePendingTransition简介

    1 Activity的切换动画指的是从一个activity跳转到另外一个activity时的动画. 它包括两个部分:一部分是第一个activity退出时的动画:另外一部分时第二个activity进入时 ...

  8. VB.NET操作Excel

    VB.NET操作Excel的基本方法与例子:

  9. No.23

    腓利比书3:19:"他们的结局就是沉沦,他们的神就是自己的肚腹,他们以自己的羞辱为荣耀,专以地上的事为念". 谨记!

  10. Ubuntu14.04源

    Ubuntu14.04源:   来源: http://wiki.ubuntu.org.cn/Qref/Source (包含15.04.14.10.14.04.12.04.10.04的源)     Ub ...