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 ...
随机推荐
- Windows 10 Pro_Ent Insider Preview x86 x64 10147中文版激活
点击激活windows输入密钥:CC6JP-VN67C-8KCJ4-4V48V-HXM9B然后下载附件中的程序解压后运行注销即可激活企业版:在专业版基础上输入升级密钥:CKFK9-QNGF2-D34F ...
- C# 关闭显示器（显示）
1.先引入DllImport所在的名称空间 using System.Runtime.InteropServices; 2.引入方法 [DllImport("user32.dll" ...
- HTTP头返回码分析
http协议通讯时,在客户端发送请求后(request),服务器端返回的状态码解释(response) http状态码 1**:请求收到,继续处理 2**:操作成功收到,分析.接受 ...
- Win7命令行下查看无线网络信息
查看本机记录的wifi热点 C:\Users\Milton>netsh wlan show profiles Profiles on interface Wireless Network Con ...
- Java实现可视化迷宫
代码地址如下:http://www.demodashi.com/demo/14547.html 需求 使用深度优先算法求解迷宫路径,使用Java实现求解过程的可视化,可单步运行,形象直观. 演示效果 ...
- 微信小程序基于scroll-view实现锚点定位
代码地址如下:http://www.demodashi.com/demo/14009.html 一.前期准备工作 软件环境:微信开发者工具 官方下载地址:https://mp.weixin.qq.co ...
- 如何使用Dockerfile构建Tomcat镜像并部署war
我们都知道Docker构建一个镜像有两种方式: 使用`docker commit`命令 使用`Dockerfile`文件和`docker build`命令 那么这两种方式有何区别呢? 相同点:底层实现 ...
- MSSQL-SQL SERVER 2008安装教程
运行setup.exe 选择“安装”菜单,点击“全新安装或向现有安装添加功能. 环境检测通过,点击“确定”: 不用修改产品密钥,点击“下一步”: 点击“下一步”: 根据您的实际情况选择响应的组 ...
- Ubuntu12.04设置屏幕分辨率
Ubuntu屏幕分辨率设置 Table of Contents 1 概述 2 设置前 3 设置 4 参考 1 概述 我的Ubuntu12.04不知道被我怎么折腾了一番,屏幕的分辨率错乱了,没有办法找到 ...
- 如何解决普通用户使用sudo找不到命令
一.在linux的普通用户下,要使用root权限的命令需要使用sudo [dev@dev1 client_api]# sudo git pull origin develop sudo: git: c ...