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 ...
随机推荐
- Python3.2官方文档翻译--标准库概览（一）
7.1 操作系统接口 Os模块提供主要很多与操作系统交互的函数. >>> import os >>> os.getcwd() # Return the curren ...
- Simple example
This is a simple example showing a small window. Yet we can do a lot with this window. We can resize ...
- 转：StdRegProv类所属方法的使用
在root\default命名空间中的StdRegProv类(标准注册表提供程序)提供了下面16种方法,我们将陆续介绍这些方法的使用规则,并给出分别用WBscript和Powershell编写的例子. ...
- ios 的 desciption
前段时间,终于将 ipa 文件打包完毕,上传appStore ,最后被打回,是因为 敏感的调用设备功能没有写描述. 有两种解决方式: A.直接修改 info.plist 文件 1.设置启动图标(CFB ...
- EXCEPTION-javaBean
CreateTime--2016年11月24日14:29:43Author:Marydon 声明:异常类文章主要是记录了我遇到的异常信息及解决方案,解决方案大部分都是百度解决的,(这里只是针对我遇 ...
- python之函数用法bin()
# -*- coding: utf-8 -*- #python 27 #xiaodeng #python之函数用法bin() #bin() #说明:一个整数转换为一个二进制字符串 ''' bin(.. ...
- HTTP协议详解之基本认证篇
•什么是HTTP基本认证: 桌面应用程序也通过HTTP协议跟web服务器交互,桌面应用程序一般不会使用cookie,而是把‘用户名+:+密码’用base64编码之后的string放在request中的 ...
- python实现的、带GUI界面电影票房数据可视化程序
代码地址如下:http://www.demodashi.com/demo/14588.html 详细说明: Tushare是一个免费.开源的python财经数据接口包.主要实现对股票等金融数据从数据采 ...
- TScrollBox响应鼠标滚轮问题
Delphi的TScrollBox本身并不响应鼠标滚轮事件(不知道为什么),但可以在ScrollBox的鼠标滚动事件中进行控制: procedure TfrmTaskNoteEdit.ScrollBo ...
- log4j的NDC/MDC区别与应用
MDC与NDC除了存储方式(MDC采用MapNDC采用堆栈结构)有区别,其他都一样的 关键点 A -//引入log4j MDC类org.apache.log4j.MDC -//设置值 -MDC.put ...