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.属 ...
随机推荐
- STM32中printf重定向到串口
学习STM32过程中,经常打交道的莫过于串口,你可以将任何信息,当然重要的是调试信息打印到串口中输出,总是用一个字节发送函数或者字符串发送函数 总是有些不放便,之前编程中熟悉的莫过于printf了,下 ...
- Java基础--注解Annotation
Annotation是给类,方法或域上加的一种特殊的标记,可以通过反射取到注解的类型和值,从而完成某种特定的操作. 定义注解需要使用元注解,元注解有@Retention和@Target //@Rete ...
- 分析诊断工具之五：Procedure Analyse优化表结构
一.Procedure Analyse PROCEDURE ANALYSE() ,在优化表结构时可以辅助参考分析语句.通过分析select查询结果对现有的表的每一列给出优化的建议. 利用此语句,MyS ...
- git 学习 多个提交用同一个commit
git add .git commit --amend(连续按连个ZZ)git push -f origin ibm_branch(命令行可能不好用,用IDEA force push好用)
- Nor Flash的CFI与JEDEC接口
Flash 存储器接口还有两个标准:CFI和JEDEC.CFI为公共Flash接口[Common Flash Interface],用来帮助程序从Flash芯片中获取操作方式信息(发送命令,从nor ...
- Vue指令学习
# new Vue({ vue所有的数据都是放到data里面的 # data:{ vue对象的数据 # a:1,对象 # b:[] , # } # methods:{vue对象的方法 # dosomt ...
- 深入理解CPU和异构计算芯片GPU/FPGA/ASIC （下篇）
3.2.1 CPU计算能力分析 这里CPU计算能力用Intel的Haswell架构进行分析,Haswell架构上计算单元有2个FMA(fused multiply-add),每个FMA可以对256bi ...
- 使用AJAX异步提交表单的几种方式
方式一 手工收集所有的用户输入,封装为大的“k1=v1&k2=v2…”键值对形式,使用$.post(url, data,fn)把数据提交给服务器 $.ajax({ type:'post', u ...
- 问题：oracle 两个表之间的修改；结果：ORACLE 两个表之间更新的实现
前提条件: 表info_user中有字段id和name,字段id为索引 表data_user_info中有字段id和name,字段id为索引 其中表info_user中字段id和表data_user_ ...
- UML在软件开发中各个阶段的作用和意义
经典的软件工程思想将软件开发分成5个阶段:需求分析,系统分析与设计,系统实现,测试及维护五个阶段. 之所以如此,是因为软件开发中饣含了物和人的因素,存在着很大的不确定性,这使得软件工程不可能像理想的, ...