前言

上篇介绍了一些指令的应用，本篇介绍一些常用的用法格式。

内容

指令实战

下面通过输入一个名字实现实时更新文本内容。

需要的指令有：

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（三）——指令实战及自定义指令的更多相关文章

  1. AngularJS高级程序设计读书笔记 -- 指令篇 之 自定义指令

    2. 自定义指令(15-17 章) Module.directive(name, factory) 2.1 创建自定义指令的方法 Module.directive(name, factory) 示例 ...

  2. angularjs 一篇文章看懂自定义指令directive

     壹 ❀ 引 在angularjs开发中,指令的使用是无处无在的,我们习惯使用指令来拓展HTML:那么如何理解指令呢,你可以把它理解成在DOM元素上运行的函数,它可以帮助我们拓展DOM元素的功能.比如 ...

  3. angular指令详解--自定义指令

    自定义指令 directive()这个方法是用来定义指令的: angular.module('myApp', []) .directive('myDirective', function ($time ...

  4. vue.js实现内部自定义指令和全局自定义指令------directive

    在Vue中,我们平时数据驱动视图时候,内部自带的指令有时候解决不了一些需求,这时候,Vue给我们一个很好用的东东 directive 这个单词是我们写自定义指令的关键字哦 之定义指令为我们提供了几个钩 ...

  5. angularJS directive详解（自定义指令）

    Angularjs指令定义的API AngularJs的指令定义大致如下 其中return返回的对象包含很多参数,下面一一说明 1.restrict (字符串)可选参数,指明指令在DOM里面以什么形式 ...

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

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

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

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

  8. vue自定义指令，比onerror更优雅的方式实现当图片加载失败时使用默认图，提供三种方法

    首先,来看下效果图(演示一下图片正常加载与加载失败时的效果) 在线体验地址:https://hxkj.vip/demo/vueImgOnerror/ 一.常规方法解决 我们都知道,img标签支持one ...

  9. AngualrJS之自定义指令

    一.指令 指令directive是AngularJS的核心之一 包括 - 用于扩展HTML元素.属性的指令 - 执行特定功能的指令 - 自定义指令 内置指令基本上都是以ng-开头 二.内置指令 1.属 ...

随机推荐

  1. C语言 字符串中数字的运算

    主函数中输入字符串"32486"和"12345",在主函数中输出的函数值为44831. #include <stdio.h> #include &l ...

  2. [转载]关于linux下system()函数的总结

    1.曾经的曾经,被system()函数折磨过,之所以这样,是因为对system()函数了解不够深入.这里必须要搞懂system()函数,因为有时你不得不面对它. 2.先来看一下system()函数的简 ...

  3. pushd,popd,dirs,cd -让切换目录更方便

    与linux cd命令相似,用pushd实现在不同目录间切换 在命令行模式下,当你工作在不同目录中,你将发现你有很多时间都浪费在重复输入上如果这些目录不在同一个根目录中,你不得不在转换时输入完整的路径 ...

  4. .Net 一直在改变

    Microsoft 微软又进一步了,每天都有惊喜. MSDN,是微软官网开发者技术支持网络,今天给我一个小惊喜,不多说直接上图.分享给大家 右键新打开Tab选项,就能看到官方的源码实现.为我们学习提供 ...

  5. 2014.10.1 Word技巧

    设置每页都出现的表头 wordDoc.Tables[tab].Rows[1].HeadingFormat = (int)Word.WdConstants.wdToggle; //合并单元格 wordD ...

  6. java.util.Date、java.sql.Date、java.sql.Time、java.sql.Timestamp区别和总结

    在web开发中,避免不了对日期的操作,就几种常见的日期操作做个总结(部分参考网络,在此表示感谢): java.util.Date.java.sql.Date.java.sql.Time.java.sq ...

  7. 微信开发准备(一)--Maven仓库管理新建WEB项目

    转自:http://www.cuiyongzhi.com/post/13.html 在我们的项目开发中经常会遇到项目周期很长,项目依赖jar包特别多的情况,所以我们经常会在项目中引入Maven插件,建 ...

  8. ffmpeg/ffplay源码剖析笔记<转>

    转载:http://www.cnblogs.com/azraelly/ http://www.cnblogs.com/azraelly/archive/2013/01/18/2865858.html ...

  9. HBase入门基础教程 HBase之单机模式与伪分布式模式安装

    在本篇文章中,我们将介绍Hbase的单机模式安装与伪分布式的安装方式,以及通过浏览器查看Hbase的用户界面.搭建HBase伪分布式环境的前提是我们已经搭建好了Hadoop完全分布式环境,搭建Hado ...

  10. Python之tuple的创建以及使用

    tuple又是一种有序列表,它与list只有两种不同:1.创建后不能更改.2.创建时得用() 在使用tuple的时候我们需要进行那个添加一个“,” 如果不加的话就是一个整数. 但是tuple作为一个不 ...