目录：

$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. spring拦截器排除 静态资源

    拦截器需要排除静态资源,不然会造成资源浪费 <!-- 拦截器 --> <mvc:interceptors> <!-- 使用bean定义一个Interceptor,直接定义 ...

  2. 深入理解android:id以及@+id/name和@id/name的区别联系

    今天为了好好研究了下@+id/name和@id/name的区别以及联系,又翻了翻文档/guide/topics/resources/layout-resource.html中关于 android:id ...

  3. php时间类

    1.需求 数据库的时间都是用10个长度的时间戳存储,拿出来的时候要转为更易读的格式 2.例子 <?php class Mydate{ public function get_millisecon ...

  4. C# 调用webservice 几种办法（转载）

    原文地址: http://www.cnblogs.com/eagle1986/archive/2012/09/03/2669699.html //=========================== ...

  5. toast组件小结

    简介:toast是"吐司"的意思,它属于android杂项组件,是一个简单的消息提示框,类似于javascript中的alert. 作用 显示文本 显示图片 显示图文 3.常用方法 ...

  6. 原生JS实现购物车结算功能代码+zepto版

    html <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3 ...

  7. 移动端H5页面高清多屏适配方案

    背景 开发移动端H5页面 面对不同分辨率的手机 面对不同屏幕尺寸的手机 视觉稿 在前端开发之前,视觉MM会给我们一个psd文件,称之为视觉稿. 对于移动端开发而言,为了做到页面高清的效果,视觉稿的规范 ...

  8. WPF之自定义控件

    1.先定义画刷,一般存为资源字典 格式: <ResourceDictionary xmlns="http://schemas.microsoft.com/winfx/2006/xaml ...

  9. myeclipse中如何修改项目的名称

     第一种:myeclipse通用版 1.打比方,比如复制一个现有的项目,重命名项目名称,这里举例名称重新命名为"劳黑炭" 2.要清楚的是,这里的项目名称重新命名了,但是Web项目本 ...

  10. 用while语句求1~100之和

    用while语句求1~100之和 public class Ex3_5 {    public static void main(String[] args){        int n=1,sum= ...