Angular内置指令（二）

目录：

$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内置指令（二）的更多相关文章

angular内置指令相关知识
原文地址 https://www.jianshu.com/p/5a5b43a8e91f 大纲 1.angular指令的分类 2.angular指令之——组件 3.angular指令之——属性指令 (n ...
Angular内置指令（一）
要注意的是不要把自己开发的指令以ng开头,以免与内置指令冲突目录:ng-disabled,ng-readonly,ng-checked,ng-selected,ng-href,ng-src,ng- ...
Angular内置指令
记录一下工作中使用到的一些AngularJS内置指令内置指令:所有的内置指令的前缀都为ng,不建议自定义指令使用该前缀,以免冲突 1. ng-model 使用ng-model实现双向绑定,通过表单的 ...
Angular——内置指令
内置指令 ng-app 指定应用根元素,至少有一个元素指定了此属性. ng-controller 指定控制器 ng-show控制元素是否显示,true显示.false不显示 ng-hide控制元素是否 ...
[转] Angular 4.0 内置指令全攻略
[From] https://segmentfault.com/a/1190000010416792 简书链接在这篇文章中,我们将分别列举每一个内置指令的用法,并提供一个例子作为演示.尽量用最少最简 ...
Angular中的内置指令和自定义指令
NG中的指令,到底是什么(what)? 为什么会有(why)?以及怎样使用(how)? What: 在NG中,指令扩展HTML功能,为 DOM 元素调用方法.定义行为绑定数据等. Why: 最大程度减 ...
angular内置过滤器-filter
这篇文章来讲解一下angular内置的filter过滤器. 没错,这个过滤器的名字,就叫'filter',虽然自定义过滤器也是使用module.filter()...但是不要混淆了,这个filter就 ...
浅谈Angularjs至Angular2后内置指令的变化
一.科普概要说明我们常说的 Angular 1 是指 AngularJS: 从Angular 2 开始已经改名了.不再带有JS,只是单纯的 Angular: Angular 1.x 是基于JavaS ...
AngularJS内置指令
指令,我将其理解为AngularJS操作HTML element的一种途径. 由于学习AngularJS的第一步就是写内置指令ng-app以指出该节点是应用的根节点,所以指令早已不陌生. 这篇日志简单 ...

随机推荐

ORACLE 中ROWNUM用法总结(转)
ORACLE 中ROWNUM用法总结! 对于 Oracle 的 rownum 问题,很多资料都说不支持>,>=,=,between...and,只能用以上符号(<.<=.!=) ...
git 常用命令总结
git是什么就不用说了,全世界都在用git.这里仅仅纪录git在mac上的一些使用命令(终端输入)操作,作为自己的备忘录,这里不做教程,下面会附上峰哥的教程. 1.安装git 最简单的安装方法,就是直 ...
gd库
1.开启GD库扩展去掉注释: extension=php_gd2.dll extension_dir='ext目录所在位置' 2.检测GD库是否开启 phpinfo(); //检测扩展是够开启 ex ...
linux Mint 安装tomcat8
先安装jdk,由于我这以安装jdk这里就不做详细描述: 到官网下载和自己jdk对应版本的tomcat包(tomcat.apache.org) 解压tomcat包到/opt/tomcat8下 tar - ...
Redis启动多端口、运行多实例
默认Redis程序安装在/usr/local/redis目录下: 配置文件:/usr/local/redis/redis.conf,该配置文件中配置的端口为默认端口:6379: Redis的启动命令路 ...
Gitlab完美安装【CentOS6.5安装gitlab-6.9.2】
摘要: 拆腾了几天,终于在今天找到了快速安装Gitlab的方法.CentOS6.5安装gitlab-6.9.2 参考网址:https://gitlab.com/gitlab-org/omnibus-g ...
The difference between QA, QC, and Test Engineering
Tuesday, March 06, 2007 Posted by Allen Hutchison, Engineering Manager and Jay Han, Software Enginee ...
CentOS7 睡眠休眠关机电源
设置装有 CentOS7 的笔记本合盖后黑屏进入睡眠模式 systemd 能够处理某些电源相关的 ACPI事件,你可以通过从 /etc/systemd/logind.conf 以下选项进行配置: Ha ...
react开发环境搭建
---恢复内容开始--- 要想用react,需要安装: 1)babel-sublime: 作用:编译es6,支持ES6, React.js, jsx代码高亮,并对所编译的代码进行高亮显示. 安装步骤: ...
C#单例模式的多种写法
它的主要特点不是根据客户程序调用生成一个新的实例,而是控制某个类型的实例数量-唯一一个.(<设计模式-基于C#的工程化实现及扩展>,王翔).也就是说,单例模式就是保证在整个应用程序的生命周 ...

Angular内置指令（二）

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

随机推荐

热门专题