AngularJS——第3章 指令
第3章 指令
- 所谓指令就是AngularJS自定义的HTML属性或标签,这些指令都是以ng-做为前缀的,例如ng-app、ng-controller、ng-repeat等。
3.1 内置指令
ng-app 指定应用根元素,至少有一个元素指定了此属性。
ng-controller 指定控制器
ng-show控制元素是否显示,true显示、false不显示
ng-hide控制元素是否隐藏,true隐藏、false不隐藏
ng-if控制元素是否“存在”,true存在、false不存在
ng-src增强图片路径
ng-href增强地址
ng-class控制类名
ng-include引入模板
ng-disabled表单禁用
ng-readonly表单只读
ng-checked单/复选框表单选中
ng-selected下拉框表单选中
【示例1】
<body ng-app="App"> <!--指定应用根元素,至少有一个元素指定了此属性-->
<!--由于浏览器加载顺序问题,显示内容时会产生闪烁-->
<ul ng-controller="DemoController"> <!--定义控制器-->
<li ng-bind="name">绑定数据变量,显示结果与{{name}}一样</li>
<li>{{name}}</li>
<li ng-show="1">ng-show用来显示过程隐藏内容的,当值为true时显示</li>
<li ng-hide="1">ng-hide用来隐藏内容,当值为true时隐藏</li>
<li ng-if="1">ng-if用来控制元素是否存在,当值为true时存在</li>
<li><img ng-src="{{path}}" alt="">ng-src用来增强图片路径,使用ng-src而不适用src的原因是src在页面从上到下加载时就会直接请求src的资源,如果所给的是像path这样的变量路径,那么在第一次请求之后没有请求到需要的内容,在执行到script时还会再加载一遍,浪费资源,而ng-src不会直接被浏览器识别,只有在script的内容加载玩后才会显示,href同理</li>
<li ng-class="{red:true}">控制类名:ng-class="{}"中单括号表示对象</li>
</ul>
<script src="./libs/angular.min.js"></script>
<script>
//创建Model
var App = angular.module('App', []);
//Controller
App.controller('DemoController', ['$scope', function ($scope) {
//$scope
$scope.name = 'itcast';
$scope.path = './images/author.jpg';
$scope.link = '#';
$scope.red= 'red';
}]);
</script>
</body>
- 【示例2】ng-include
<body ng-app="App">
<div ng-include="'./header.html'"></div>
<section>主体</section>
<div ng-include="'./footer.html'"></div>
<script src="./libs/angular.min.js"></script>
<script>
var App = angular.module('App', []);
</script>
</body>
3.2 自定义指令
语法:App.directive('tag', function(){});
示例:
// 通过模块实例对象的directive方法可以自定义指令
App.directive('tag', function () {
// 返回一个对象,这个对象就是自定义指令相关的内容
return {
// E element——元素
// A attribute——属性
// C class——类
// M mark replace——备注,必须为true
restrict: 'ECMA',
// template: '<ul><li>首页</li><li>列表</li></ul>',
templateUrl: './list.html'
// replace: true
}
});
AngularJS——第3章 指令的更多相关文章
- 带你走近AngularJS - 创建自己定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- AngularJS常用插件与指令收集
angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...
- angularjs 创建自定义的指令
创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...
- AngularJS:directive自定义的指令
除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...
- AngularJS的表达式、指令的学习(2)
最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...
- AngularJS——第9章 模块加载
第9章 模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> ...
- AngularJS——第4章 数据绑定
第4章 数据绑定 AngularJS是以数据做为驱动的MVC框架,所有模型(Model)里的数据经由控制器(Controller)展示到视图(View)中. 所谓数据绑定指的就是将模型(Model)中 ...
- AngularJS——第2章 模块化
第2章 模块化 使用AngularJS构建应用时是以模块化的方式组织的,即将整个应用划分成多个小模块,各个模块有各自的职责,最终实现完整的应用. 2.1 定义应用 通过为任一HTML标签添加ng-ap ...
随机推荐
- vue:一个vue可以使用的视频插件
网址:https://www.jianshu.com/p/e8e747e33ef0 1:安装依赖 npm install vue-video-player -S 2:引入配置(main.js) imp ...
- DATASNAP远程方法返回TSTREAM正解(转咏南兄)
DATASNAP远程方法返回TSTREAM正解 DATASNAP远程方法返回TSTREAM,如果数据大小超过32K是会报错的.许多DELPHIER栽在这个上头,甚至开始怀疑TSTREAM返回数据的可行 ...
- ZEOSDBO-7安装
zeosdbo是一套免费开源的Delphi数据库连接组件,可连接mssql.mysql.sybase.oracle.firebird.sqlite.postgresql等多种数据库.调用方法简单. 连 ...
- Excel导入oracle的几种方法
http://www.jb51.net/list/list_154_1.htm 方法一.使用SQL*Loader这个是用的较多的方法,前提必须oracle数据中目的表已经存在.大体步骤如下:1.将ex ...
- Java基本语法知识要点
0x00 一个源文件中有多少个类,在用javac编译后,在同一目录下将产生多少个对应的字节码文件(.class ).类里面不一定要有public static void main(String[] ...
- 14.Java集合简述.md
Java的集合类别,分为两类Collection和Map,Collenction包含了Set: •Set:无序,不可重复的集合 •List:有序,重复的集合 •Map:具有映射关系的集合 •Queue ...
- Hibernate 再接触 关系映射 一对一单向外键联合主键关联
例子: Husband.java package com.bjsxt.hibernate; import javax.persistence.Entity; import javax.persiste ...
- C++学习二继承
转载自https://www.cnblogs.com/33debug/p/6666939.html 1.继承与派生 继承是使代码可以复用的重要手段,也是面向对象程序设计的核心思想之一.简单的说,继承 ...
- ORA-30926: 无法在源表中获得一组稳定的行ORA-06512: 在 "STG.FP_MO_SPLIT", line 1562 临时
- NBU 还原LINUX ORACLE RAC数据库(CRM)
CRM集群数据库恢复 linux centos 6.6 oracle 11.2.0.3 集群环境 1.53 oraclea 1.54 oracleb 在linux操作系统root用户下安装好NBUci ...