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的工厂函数就是实现元素自动获取焦点这一功能

效果截图:

打开页面时:

按下回车后:

转载于:https://www.cnblogs.com/minghui007/p/7206144.html

angular学习笔记(十九)-自定义指令修改dom相关推荐

Mr.J-- jQuery学习笔记(十九)--自定义动画实现图标特效
之前有写过自定义动画Mr.J-- jQuery学习笔记(十八)--自定义动画这次实现一个小demo 图标特效页面渲染 <!DOCTYPE html> <html lang=&qu ...
Polyworks脚本开发学习笔记(十九)-将数据对象与参考对象对齐的方法
Polyworks脚本开发学习笔记(十九)-将数据对象与参考对象对齐的方法把开发手册理了一遍,发现还有几个点没有记录下来,其中一个就是使用点对的粗对齐和使用参考目标的精确对齐.为了把这个学习笔记凑够 ...
步步为营 .NET 设计模式学习笔记十九、Chain of Responsibility(职责链模式)
概述在软件构建过程中,一个请求可能被多个对象处理,但是每个请求在运行时只能有一个接受者,如果显示指定,将必不可少地带来请求发送者与接受者的紧耦合. 如何使请求的发送者不需要指定具体的接受者?让请求的 ...
【theano-windows】学习笔记十九——循环神经网络
前言前面已经介绍了RBM和CNN了,就剩最后一个RNN了,抽了一天时间简单看了一下原理,但是没细推RNN的参数更新算法BPTT,全名是Backpropagation Through Time. [注 ...
Mr.J-- jQuery学习笔记(十八)--自定义动画
animate(params,[speed],[easing],[fn]) 概述用于创建自定义动画的函数. 这个函数的关键在于指定动画形式及结果样式属性对象.这个对象中每个属性都表示一个可以变化的样 ...
javascript学习笔记(十九) 节点的操作
包括节点的创建.添加.移除.替换.复制本节要用到的html例子 1 <ul id="myList"> 2 <li>项目一</li> 3 < ...
angular学习笔记(十四)-$watch(3)
同样的例子,还可以这样写: <!DOCTYPE html> <html ng-app> <head><title>11.3$watch监控数据变化< ...
乐优商城学习笔记十九-商品详情（二）
2.页面静态化 2.1.简介 2.1.1.问题分析现在,我们的页面是通过Thymeleaf模板引擎渲染后返回到客户端.在后台需要大量的数据查询,而后渲染得到HTML页面.会对数据库造成压力,并且请求 ...
three.js学习笔记(十九)——后期处理
介绍后期处理是指在最终图像(渲染)上添加效果.人们大多在电影制作中使用这种技术,但我们也可以在WebGL中使用. 后期处理可以是略微改善图像或者产生巨大影响效果. 下面链接是Three.js官方文档 ...

angular学习笔记(十九)-自定义指令修改dom

angular学习笔记(十九)-自定义指令修改dom相关推荐

最新文章

热门文章