前言

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

内容

指令实战

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

需要的指令有:

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. hihoCoder#1079(线段树+坐标离散化)

    时间限制:10000ms 单点时限:1000ms 内存限制:256MB 描述 小Hi和小Ho在回国之后,重新过起了朝7晚5的学生生活,当然了,他们还是在一直学习着各种算法~ 这天小Hi和小Ho所在的学 ...

  2. [转] pip镜像升级报警 -trust-host问题解决方案

    pip升级到7.0以后,在使用http镜像进行包安装及升级的时候往往会有如下提示: Collecting beautifulsoup4The repository located at mirrors ...

  3. java代码包装类----------Integer

    总结:我的笔试挂了..基础的继承不懂不会.我不知道到底是哪里的问题. 要好好反思 package com.da.ima2; public class jrfk { // int整型不能直接转化为Int ...

  4. expected declaration specifiers or '...' before string constant

    /work/platform_bus_dev_drv/led_dev.c:52: error: expected declaration specifiers or '...' before stri ...

  5. 配置docker中免密码SSH

    更换docker国内镜像,使用DaoCloud,特别快 编写Dockerfile文件 FROM ubuntu MAINTAINER ggzone xxx@live.com ENV REFRESHED_ ...

  6. CKEditor 自定义按钮插入服务端图片

    CKEditor 富文本编辑器很好用,功能很强大,在加上支持服务端图片上传的CKFinder更是方便, 最近在使用CKFinder的时候发现存在很多问题,比如上传图片的时候,图片不能按时间降序排列,另 ...

  7. 读取XML文件的指定节点的值 并转换为Item

    cmb_State_Send.ItemsSource = null; XmlDocument doc = new XmlDocument(); doc.Load("D:\\模板\\Works ...

  8. LAMP 2.6 Apache 禁止指定user_agent

    user_agent 我把它叫做浏览器标识, 目前主流的浏览器有 IE. chrome. Firefox. 360. iphone上的 Safari.Android 手机上的.百度搜索引擎.googl ...

  9. Http 与Https

    一个Http请求 DNS域名解析 --> 发起TCP的三次握手 --> 建立TCP连接后发起http请求 --> 服务器响应http请求,浏览器得到html代码 --> 浏览器 ...

  10. 使用VBSCRIPT安装字体

    根据新系统要求,经常要部署一些原来系统里没有的字体,原先我为了图省事经常会要求用户手动安装字体文件,虽然Windows的易用性做得相当不错,但是仍然要照顾一些不会安装字体的人,其实把这些字体打包进安装 ...