angular学习笔记(十九)-指令修改dom
本篇主要介绍angular使用指令修改DOM:
使用angular指令可以自己扩展html语法,还可以做很多自定义的事情.在后面会专门讲解这一块的知识,这一篇只是起到了解入门的作用.
与控制器,过滤器,服务,一样,可以通过模块实例的directive的方法来创建指令:
var someModule = angular.module('SomeModule',[]);
someModule.directive('directiveName',function(){
return {
link: function(scope,elements,attrs,controller){
}
}
});
directive传入两个参数:
第一个参数是指令的名字;
第二个参数是一个工厂函数:
函数返回一个对象,对象的link方法的函数有四个参数:
scope:获取外层scope的引用
elements:它所存在的DOM元素
attrs:传递给指令的一个属性数组
controller:DOM元素上的控制器
下面来看个简单的小例子,在html5中,元素有autofocus属性,添加了这个属性的元素,会自动获取焦点.我们可以使用angular来写一个这样的指令:
我们让第二个button在打开的时候就获取焦点,所以按回车就相当于点击了这个按钮:
<!DOCTYPE html>
<html ng-app="AutoFocus">
<head>
<title>16.1使用指令修改DOM</title>
<meta charset="utf-8">
<script src="../angular.js"></script>
<script src="script.js"></script>
<style type="text/css">
*{
font-family:'MICROSOFT YAHEI';
font-size:12px
}
</style>
</head>
<body>
<div ng-controller="focus">
<button ng-click="nofocus()">没有焦点</button>
<br/>
<button myautofocus ng-click="hasfocus()">有焦点</button>
<br/>
<br/>
<span>{{text}}</span>
</div>
</body>
</html>
var autoFocus = angular.module('AutoFocus',[]);
autoFocus.controller('focus',function($scope){
$scope.text="没有点击任何按钮";
$scope.nofocus = function(){
$scope.text="没有点击任何按钮";
};
$scope.hasfocus = function(){
$scope.text="点击了有焦点按钮";
};
});
autoFocus.directive('myautofocus',function(){
return {
link: function(scope,elements,attrs,controller){
elements[0].focus();
}
}
});
一.创建模块AutoFocus
二.通过模块的controller方法创建控制器focus
三.通过模块的directive方法创建指令myautofocus
myautofocus的工厂函数就是实现元素自动获取焦点这一功能
效果截图:
打开页面时:
按下回车后:
angular学习笔记(十九)-指令修改dom的更多相关文章
- python3.4学习笔记(十九) 同一台机器同时安装 python2.7 和 python3.4的解决方法
python3.4学习笔记(十九) 同一台机器同时安装 python2.7 和 python3.4的解决方法 同一台机器同时安装 python2.7 和 python3.4不会冲突.安装在不同目录,然 ...
- (C/C++学习笔记) 十九. 模板
十九. 模板 ● 模板的基本概念 模板(template) 函数模板:可以用来创建一个通用功能的函数,以支持多种不同形参,进一步简化重载函数的函数体设计. 语法: template <<模 ...
- 【转】angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十四)-$watch(1)
本篇主要介绍$watch的基本概念: $watch是所有控制器的$scope中内置的方法: $scope.$watch(watchObj,watchCallback,ifDeep) watchObj: ...
- angular学习笔记(十五)-module里的'服务'
本篇介绍angular中的模块:module 在笔记(二)http://www.cnblogs.com/liulangmao/p/3711047.html里已经讲到过模块,这篇主要讲模块的 '服务' ...
- Java基础学习笔记十九 IO
File IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再 ...
- Java基础学习笔记十九 File
IO概述 回想之前写过的程序,数据都是在内存中,一旦程序运行结束,这些数据都没有了,等下次再想使用这些数据,可是已经没有了.那怎么办呢?能不能把运算完的数据都保存下来,下次程序启动的时候,再把这些数据 ...
- angular学习笔记(十六) -- 过滤器(2)
本篇主要介绍angular自定义的过滤器: 直接看例子: <!DOCTYPE html> <html ng-app="MyFilter"> <head ...
- angular学习笔记(十六) -- 过滤器(1)
本篇主要介绍过滤器的基本用法: 过滤器用来对数据进行格式的转换,数据格式的转化与逻辑无关,因此,我们使用过滤器来进行这些操作: {{... | filter2: 参数1,参数2... }} expre ...
随机推荐
- Java从零开始学二十(集合简介)
一.为什么需要集合框架 数组的长度是固定的,但是如果写程序时并不知道程序运行时会需要多少对象.或者需要更复杂的方式存储对象,---那么,可以使用JAVA集合框架,来解决这类问题 二.集合框架主要接口 ...
- PL/SQL之DBMS_SQL程序包使用（1）（学习笔记）
dbms_sql程序包dbms_sql程序包是系统提供给我们的另一种使用动态SQL的方法:使用DBMS_SQL包实现动态的SQL的步骤如下:1.将要执行的SQL语句或者一个语句放到一个字符串变量中2. ...
- 算法笔记_177:历届试题 城市建设(Java)
目录 1 问题描述 2 解决方案 1 问题描述 问题描述 栋栋居住在一个繁华的C市中,然而,这个城市的道路大都年久失修.市长准备重新修一些路以方便市民,于是找到了栋栋,希望栋栋能帮助他. C市中有 ...
- Android Gson解析json详解
目前解析json有三种工具:org.json(Java常用的解析),fastjson(阿里巴巴工程师开发的),Gson(Google官网出的),解析速度最快的是Gson,下载地址:https://co ...
- Windows10关闭SearchUI.exe进程的方法
目前唯一的方法只能通过修改Cortana目录的方法来禁止Cortana 路径:C:\Windows\SystemApps\Microsoft.Windows.Cortana_***
- webservice系统学习笔记8-简单的权限校验
服务端handler.java package com.ws01; import java.util.Set; import javax.xml.namespace.QName; import jav ...
- 10、java初始化顺序
在new B一个实例时首先要进行类的装载.(类只有在使用New调用创建的时候才会被java类装载器装入) 2,在装载类时,先装载父类A,再装载子类B3,装载父类A后,完成静态动作(包括静态代码和变 ...
- java随机函数使用方法Random
import java.util.Random; public class RandomNumber{ public static void main(String[] args) { // 使用ja ...
- FCT需求分析
1. 系统组成 系统从硬件角度看是由芯片.电源,时钟,总线组成, 当中总线分为控制总线和数据总线. 芯片是单个的硬件单元,可实现多种功能.有些功能有性能需求,在计算机系统中大部分功能都须要软件配合. ...
- Java中创建实例化对象的几种方式
Java中创建实例化对象有哪些方式? ①最常见的创建对象方法,使用new语句创建一个对象.②通过工厂方法返回对象,例:String s =String.valueOf().(工厂方法涉及到框架)③动用 ...