AngularJS（三）——指令实战及自定义指令
前言
上篇介绍了一些指令的应用，本篇介绍一些常用的用法格式。
内容
指令实战
下面通过输入一个名字实现实时更新文本内容。
需要的指令有：
ng-app、ng-model、ng-bind、n-init
Demo
要引用的文件（这里第一次出现以后，后面引用的都是这个文件，以后不再重复）
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
Body部分
<body> <div ng-app="" ng-init="firstName='zhou'">
<p>在输入框中尝试输入:</p>
<p>姓名: <input type="text" ng-model="firstName"></p>
<p>你输入的为: {{ firstName }}</p>
<p ng-bind='firstName'></p>
</div> </body>
实现的效果：
该例子解析：
ng-app:该指令告诉AngularJS，<div>元素是AngularJS应用程序的所有者，在网页加载完毕时会自动引导（自动初始化）应用程序）；
ng-model:该指令绑定HTML元素到应用程序数据；
ng-bind:绑定要运算的要显示的内容数据，用于显示通过绑定HTML元素到应用程序的数据；
ng-init：该指令为AngularJS应用程序的定义了初始值；
创建自定义指令
使用.directive函数来添加自定义的指令，使用驼峰法来命名一个指令，runoobDirective，但在使用它的时候需要以“-”分割，runoob-directive；举例说明：
<body ng-app="myApp">
<runoob-directive></runoob-directive>
<script>
//自定义指令部分
var app = angular.module("myApp", []); //
app.directive("runoobDirective", function() {
return {
template : "<h1>快来看，这就是自定义指令!</h1>"
};
});
</script>
</body>
小结
本篇大概说了指令的应用格式以及怎么创建自定义指令。
感谢您的宝贵时间···
AngularJS（三）——指令实战及自定义指令的更多相关文章
- AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令
2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...
- angularjs 一篇文章看懂自定义指令directive
壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...
- angular指令详解--自定义指令
自定义指令 directive()这个方法是用来定义指令的: angular.module('myApp', []) .directive('myDirective', function ($time ...
- vue.js实现内部自定义指令和全局自定义指令------directive
在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...
- angularJS directive详解（自定义指令）
Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...
- 带你走近AngularJS - 创建自定义指令
带你走近AngularJS系列: 带你走近AngularJS - 基本功能介绍 带你走近AngularJS - 体验指令实例 带你走近AngularJS - 创建自定义指令 ------------- ...
- 带你走近AngularJS 之创建自定义指令
带你走近AngularJS 之创建自定义指令 为什么使用AngularJS 指令? 使用过 AngularJS 的朋友应该最感兴趣的是它的指令.现今市场上的前端框架也只有AngularJS 拥有自定义 ...
- vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法
首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...
- AngualrJS之自定义指令
一.指令 指令directive是AngularJS的核心之一 包括 - 用于扩展HTML元素.属性的指令 - 执行特定功能的指令 - 自定义指令 内置指令基本上都是以ng-开头 二.内置指令 1.属 ...
随机推荐
- myeclipse与eclipse的web项目部署区别
一.myeclipse之web项目的部署(发布)流程 web项目的部署(发布)流程2008-01-18 14:35 在myeclipse下新建web工程abc.系统设置默认如下: 项目保存位置:wor ...
- 基于:Hadoop 2.6.0-cdh5.4.0 hive1.1.0 HBase 1.0.0-cdh5.4.0 关键配置文件
core-site.xml <configuration> <property> <name>fs.defaultFS</name> <value ...
- hadoop再次集群搭建（3）-如何选择相应的hadoop版本
之前接触过很多很多hadoop版本,现在重新搭建平台,面临选择哪个版本的问题. 当我们决定是否采用某个软件用于开源环境时,通常需要考虑以下几个因素: (1)是否为开源软件,即是否免费. (2) 是否有 ...
- Android广播接收者
其实,在什么是广播的第一句就已经说明了广播有什么用了.对了,笼统一点讲就是用来传输数据的.具体一点说就是:1. 实现了不同的程序之间的数据传输与共享,因为只要是和发送广播的action相同的接受者都能 ...
- Codeforces 1093E Intersection of Permutations (CDQ分治+树状数组）
题意:给你两个数组a和b,a,b都是一个n的全排列:有两种操作:一种是询问区间在数组a的区间[l1,r1]和数组b的区间[l2,r2]出现了多少相同的数字,另一种是交换数组b中x位置和y位置的数字. ...
- Codeforces #504(div1+div2) 1023D Array Restoration(线段树)
题目大意:给你一个数组,数组是经过q次区间覆盖后的结果,第i次覆盖是把区间内的值赋值为i,其中有若干个地方数值未知(就是0),让你判断这个数组是否可以经过覆盖后得到的,如果可以,输出任意一种可行数组. ...
- CURD 操作 [2]
一.数据读取 在之前的课程中,我们已经大量使用了数据读取的功能,比如 select()方法.结合各种连贯方法可以实现数据读取的不同要求,支持连贯的方法有: 1.where,查询或更新条件:2.tabl ...
- Unity3d 脚本与C#Socket服务器传输数据
Test.cs脚本 ------------------------------------------------------------------------------------------ ...
- eclips git中的add to Index无效解决
今天在使用eclips git中的add to Index,发现其无效,具体如下 问题描述: 通过export导入一个git java项目 在java工程中新增一个类文件IndicatorCalcTe ...
- php学习笔记-continue和break
这两个关键字经常被用在循环中,但作用是完全不同的. 在循环中遇到continue这个单词的时候一定要理解为skip,跳过或者略过,啥意思?就是跳过本次循环,后面的循环继续走起来,老铁. break是说 ...