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 ...
随机推荐
- VB总结1-事件过程之键盘鼠标过程
事件过程:参考 (http://baike.baidu.com/view/1523990.htm) 事件是指对象对于外部动作的响应,当对象发生了某个事件,就会执行与此对象的这个事件相应的代码,这段代码 ...
- POSIX 线程详解
一种支持内存共享的简捷工具 POSIX(可移植操作系统接口)线程是提高代码响应和性能的有力手段.在本系列中,Daniel Robbins 向您精确地展示在编程中如何使用线程.其中还涉及大量幕后细节,读 ...
- cmd获取批处理文件所在路径
在批处理开头加入cd /d %~dp0 一行代码就真真实实地做到“编写一次,到处运行”.%0是批处理文件本身的路径,%~dp进行扩展, d向前扩展到驱动器,p往后扩展到路径.例如,你的bat文件在e: ...
- Knockout自定义绑定my97datepicker
/* my97datepicker 时间格式'yyyy-MM-dd HH-mm-ss' */ ko.bindingHandlers.datetimes = { init: function (elem ...
- logging日志管理-将日志写入文件
# -*- coding: cp936 -*- # test.py #http://blog.chinaunix.net/uid-27571599-id-3492860.html #logging日志 ...
- CentOS6.3的VNC--远程桌面
2G内存的服务器开启Gnome图形化界面应该没什么问题.1G还有512M的内存的就不敢开启了,现在内存正常状态就已经60%左右了. CentOS6.3服务器,Gnome图形化界面按照阿里官方步骤:一. ...
- 笨鸟先飞之Java（一）--使用struts2框架实现文件上传
无论是.net还是Java,我们最常接触到的就是文件的上传和下载功能,在Java里要实现这两个经常使用功能会有非常多种解决方案,可是struts2的框架却能给我们一个比較简单的方式,以下就一起来看吧: ...
- 关于iOS 热更新（热修复）你必须知道的一种方法- JSPatch
本文为转载文章 . 版权归原文所有. 原文链接:iOS 5分钟集成热修复(JSPatch) 前言 在iOS中有很多种热修复方案,在这里我就不一一介绍了 这里有一篇介绍热修复的文章:iOS中的HotFi ...
- centos7安装MySQL5.7无法设置密码问题
前言 在使用centos7系统yum方式安装MySQL5.7后 不知道默认密码是多少 知道后没办法修改? 一.找到MySQL密码 service mysqld start vim /var/log/ ...
- CSS：使用CSS3将一个div水平和垂直居中显示
使用css3将一个div水平和垂直居中显示 方案一: div绝对定位水平垂直居中[margin:auto实现绝对定位元素的居中], 代码两个关键点:1.上下左右均0位置定位: 2.margin: au ...