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>//创建Modelvar App = angular.module('App', []);//ControllerApp.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——备注，必须为truerestrict: 'ECMA',// template: '<ul><li>首页</li><li>列表</li></ul>',templateUrl: './list.html'// replace: true}});

转载于:https://www.cnblogs.com/luoyu113/p/8544681.html

AngularJS——第3章指令相关推荐

【AngularJS】—— 8 自定义指令
如何自定义指令: Angular是基于模块的框架,因此上来肯定要创建一个自己的模块: var myAppModule = angular.module("myApp",[]); 然 ...
【2020/12/4修订】【梳理】计算机组成与设计第2章指令（docx）
配套教材: Computer Organization and Design: The Hardware / Software Interface (5th Edition) 这是专业必修课<计 ...
AngularJS实战第一章
AngularJS实战作者:kimmking.大漠穷秋.任富飞问题反馈:kimmking@163.com 快速上手 AngularJS介绍-AngularJS的前世今生 AngularJS核心特性 ...
AngularJS第二课（指令，作用域，控制器）
指令实列: <div ng-init="firstName='pp'">name:<input type="text" ng-model=& ...
Angularjs编写KindEditor,UEidtor指令
目前angularJS非常火热,本人也在项目中逐渐使用该技术,在angularJS中,指令可以说是当中非常重要的一部分,这里分享一些自己编写的指令: 注:本人项目中用了oclazyload进行部分JS ...
AngularJS常用插件与指令收集
图片视频类 angular-maxonry 图片墙效果插件,可以将图片组织成类似于瀑布流的效果,依赖于jQuery.imageloaded和Masonry angular-deckgrid 另一个照片 ...
计算机原理指令系统测试卷,计算机组成原理（下）第7章指令系统测试
1.单选(1分) 一条双字长直接寻址的子程序调用指令,其第一个字为操作码和寻址特征,第二个字为地址码5000H.假设PC当前值为2000H,SP的内容为0100H,栈顶内容为2746H,存储器按字节变 ...
《计算机组成与设计(ARM版)》读书笔记-第二章指令2
文章目录 2.9 人机交互 2.10 LEGv8中的宽立即数和地址的寻址 2.10.1 宽立即数 2.10.2 分支中的寻址 2.10.3 LEGv8寻址模式总结 2.10.4 机器语言解码 2.11 ...
angularjs中的分页指令
自定义指令 import angular from 'angular';/*** @ngdoc module* @name components.page* @description 分页direct ...

AngularJS——第3章指令

第3章指令

3.1 内置指令

3.2 自定义指令

AngularJS——第3章指令相关推荐

最新文章

热门文章

AngularJS——第3章 指令

第3章 指令

3.1 内置指令

3.2 自定义指令

AngularJS——第3章 指令相关推荐

最新文章

热门文章

AngularJS——第3章指令

第3章指令

AngularJS——第3章指令相关推荐