第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章 指令的更多相关文章

  1. 带你走近AngularJS - 创建自己定义指令

    带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自己定义指令 ------------ ...

  2. 带你走近AngularJS 之创建自定义指令

    带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...

  3. AngularJS常用插件与指令收集

    angularjs 组件列表 bindonce UI-Router Angular Tree angular-ngSanitize模块-$sanitize服务详解 使用 AngularJS 开发一个大 ...

  4. angularjs 创建自定义的指令

    创建自定义的指令 除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTMl 元素上需要添加自定义指令名 ...

  5. AngularJS:directive自定义的指令

    除了 AngularJS 内置的指令外,我们还可以创建自定义指令. 你可以使用 .directive 函数来添加自定义的指令. 要调用自定义指令,HTML 元素上需要添加自定义指令名. 使用驼峰法来命 ...

  6. AngularJS的表达式、指令的学习（2）

    最近没有那么忙,就来系统学习一下AngularJS吧,昨天简单的认识了一下,今天就从表达式入手吧,嘿嘿. 一.AngularJS 表达式 AngularJS表达式写在双大括号内:{{expressio ...

  7. AngularJS——第9章 模块加载

    第9章 模块加载 AngularJS模块可以在被加载和执行之前对其自身进行配置.我们可以在应用的加载阶段配置不同的逻辑. [AngularJS执行流程] 启动阶段(startup) 开始 --> ...

  8. AngularJS——第4章 数据绑定

    第4章 数据绑定 AngularJS是以数据做为驱动的MVC框架,所有模型(Model)里的数据经由控制器(Controller)展示到视图(View)中. 所谓数据绑定指的就是将模型(Model)中 ...

  9. AngularJS——第2章 模块化

    第2章 模块化 使用AngularJS构建应用时是以模块化的方式组织的,即将整个应用划分成多个小模块,各个模块有各自的职责,最终实现完整的应用. 2.1 定义应用 通过为任一HTML标签添加ng-ap ...

随机推荐

  1. TWebBrowser控件彻底防止弹出新窗口

    最近在编写一个使用到TWebBrowser控件的软件,浏览网页时经常会弹出各种各样的窗口,尤其是广告,让人烦不胜烦,参考网上的一些资料,针对不同的弹窗方式采取相应的措施就能禁止各种弹窗. 1. 将TW ...

  2. 一例对一个或多个实体的验证失败。有关详细信息，请参阅“EntityValidationErrors”属性的解决

    这个问题相信只要是做MVC的,都碰到过,也都知道错误的原因,就是触发了定义的实例字段校验规则.比如定义的不为空,但是为空了,或者定义的字段长度为50,但是超过50了. 可是有时虽然知道是这样,但是具体 ...

  3. C#反射机制详解

    反射的定义:审查元数据并收集关於它的类型信息的能力,元数据(编辑后的基本数据单元)就是一大堆表,编译器会创建一个类定义表,一个字段定义表,一个方法定义表等,System.Reflection命名空间包 ...

  4. compose配置文件参数详解

    转自:https://www.cnblogs.com/jsonhc/p/7814138.html 本文介绍compose配置文件参数的使用,熟练编写compose文件 [root@docker lnm ...

  5. docker仓库harbor搭建随笔

    docker除了自己的registry仓库工具外,还有vmware出品的harbor,harbor集成了ui界面,用户级别认证,重要的是对镜像管理比较全面,可以删除镜像,下面是 简单的部署指南 首先: ...

  6. 浅谈MySQL事务及隔离级别

    目录 1.什么是事务 2.事务的ACID属性 2-1.原子性(Atomicity) 2-2.一致性(Consistency) 2-3.隔离性(Isolation) 2-4.持久性(Durability ...

  7. Visual studio 2019 preview & C# 8 initial experience

    Visual studio 2019 preview & C# 8 initial experience       using System; using static System.Con ...

  8. ansj

    Ansj中文分词使用教程 Ansj中文分词使用教程:https://blog.csdn.net/a822631129/article/details/52331202 ansj分词史上最详细教程:ht ...

  9. SSM综合练习

    CRM系统 CRM项目外观 1. 开发环境 IDE: Eclipse Neon Release (4.6.0) Jdk: 1.8 数据库: MySQL 2. 创建数据库 创建crm数据库,这里使用的是 ...

  10. eclipse egit(版本回退)

    在公司一年多了,用到的项目都是用svn代码托管,没有git 的用武之地,趁国庆假期稍微自学了一下,然后人比较懒,不愿用原生敲命令行的形式,就在eclipse上学学怎么用git,话说回来用了svn再来学 ...