angularjs学习之六（angularjs中directive指令的一般编程事件绑定 模板使用等）
angular js 中模板的使用。事件绑定以及指令与指令之间的交互
相应教学视频地址（需翻墙）： v=aG8VD0KvUw4">angularjs教学视频
<!doctype html>
<html ng-app="myapp">
<head>
<meta charset="utf-8"/>
</head>
<body ng-controller="ShieldController">
<div>
<who></who>
</div>
<div>
<button you-btn></button>
</div>
<theshield reigns>343</theshield>
<theshield reigns>fdhg</theshield>
<theshield rollins>hhh</theshield>
<theshield ambros>kkk</theshield>
</body>
<script src="./js/angular.min.js"></script>
<script>
var app = angular.module('myapp',[]); /*=======================1. 模板的使用 ========================*/
app.directive('who',function(){
return {
restrict:"E", //元素element 的意思
link:function(scope,element,attrs){
console.log(element);
element[0].innerHTML = 'sdfhkj'; //这个优先级别最高
},
//templateUrl:"param.html", //这个不显示 优先级别最低
template:"<h1>jkdhf</h1>" //这个显示 优先级别其次
};
}); /*=======================2. 事件的绑定 ========================*/
app.directive('youBtn',function(){
return {
restrict:"A", //attribute 属性的意思
link:function(scope,element,attrs){
console.log(element);
element[0].innerHTML = 'my btn';
//事件绑定
element.bind('mouseenter',function(){
element[0].innerHTML = 'your btn';
});
element.bind('mouseleave',function(){
element[0].innerHTML = 'her btn';
});
}
};
}); /*=======================3. 元素 属性 控制器之间的交互========================*/ app.controller('ShieldController',function($scope){
$scope.shieldNames = [];
this.addReigns = function(){
$scope.shieldNames.push("reigns:jjj");
}
this.addRollins = function(){
$scope.shieldNames.push("Rollins:hhh");
}
this.addAmbros = function(){
$scope.shieldNames.push("Ambros:ggg");
}
})
.directive('reigns',function(){
return {
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addReigns();
}
};
})
.directive('rollins',function(){
return {
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addRollins();
}
};
})
.directive('ambros',function(){
return {
require:"theshield",
link:function(scope,element,attrs,ShieldController){
ShieldController.addAmbros();
}
};
})
.directive('theshield',function(){
return {
restrict:"E",
controller:"ShieldController", //指定控制器
scope:{}, //清空该指令处的$scope 值
link:function(scope,element,attrs){
element.bind('mouseenter',function(){ //对于该指令所相应的元素绑定相应的事件
console.log(scope.shieldNames);
});
}
};
}); </script>
</html>
angularjs学习之六（angularjs中directive指令的一般编程事件绑定 模板使用等）的更多相关文章
- Angularjs学习---ubuntu12.04中karma安装配置
Angularjs学习---ubuntu12.04中karma安装配置中常见的问题总结 karma启动时出现了很多问题: 1.安装karma前提条件 安装karma首先要安装nodejs,npm然 ...
- MVVM设计模式和WPF中的实现（四）事件绑定
MVVM设计模式和在WPF中的实现(四) 事件绑定 系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中 ...
- MVVM设计模式和在WPF中的实现（四） 事件绑定
系列目录: MVVM模式解析和在WPF中的实现(一)MVVM模式简介 MVVM模式解析和在WPF中的实现(二)数据绑定 MVVM模式解析和在WPF中的实现(三)命令绑定 MVVM模式解析和在WPF中的 ...
- AngularJS中Directive指令系列 - 基本用法
参考: https://docs.angularjs.org/api/ng/service/$compile http://www.zouyesheng.com/angular.html Direct ...
- angularjs中directive指令与component组件有什么区别？
壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...
- 《AngularJS权威教程》中关于指令双向数据绑定的理解
在<AngularJS权威教程>中,自定义指令和DOM双向数据绑定有一个在线demo,网址:http://jsbin.com/IteNita/1/edit?html,js,output,具 ...
- angularjs学习笔记3-directive中scope的绑定修饰符
在angularjs中,一个directive返回一个对象,对象存在很多属性,并且可以在directive中自定义自己的scope,而使用自己的scope是为了防止一个directive被使用在多个地 ...
- AngularJs学习——何时应该使用Directive、Controller、Service？
翻译:大漠穷秋 原文链接:http://kirkbushell.me/when-to-use-directives-controllers-or-services-in-angular/ 一.简述 A ...
- angularjs学习总结一(表达式、指令、模型)
一:自执行匿名函数 (function(){ /*code*/})();自执行匿名函数:常见格式:(function() { /* code */ })();解释:包围函数(function(){}) ...
随机推荐
- 4 SQL 数据更新
4 数据更新 4-1 数据的插入(INSERT语句的使用方法) 通过create table语句创建出来的表,可以将其比作一个空空如也的箱子.只有把数据装入到这个箱子后,它才能称为数据库.用来装入数据 ...
- 使用 ES (elasticsearch) 搜索中文
1.创建索引 curl -XPUT http://172.16.125.139:9200/ques2.创建索引类型 curl -XPOST http://172.16.125.139:9200/que ...
- 剑指Offer（书）：二维数组中的查找
题目:在一个二维数组中(每个一维数组的长度相同),每一行都按照从左到右递增的顺序排序,每一列都按照从上到下递增的顺序排序.请完成一个函数,输入这样的一个二维数组和一个整数,判断数组中是否含有该整数. ...
- Python数据结构--树遍历算法
''' 遍历是访问树的所有节点的过程,也可以打印它们的值. 因为所有节点都通过边(链接)连接,所以始终从根(头)节点开始. 也就是说,我们不能随机访问树中的一个节点. 这里介绍三种方式来遍历一棵树 - ...
- mysql语句查询：查询距离某个日期10天的数据
select * from table where state = '1' and DATE_SUB(CURDATE(), INTERVAL 10 DAY) <= begin_time
- 使用hadoop mapreduce分析mongodb数据
使用hadoop mapreduce分析mongodb数据 (现在很多互联网爬虫将数据存入mongdb中,所以研究了一下,写此文档) 版权声明:本文为yunshuxueyuan原创文章.如需转载请标明 ...
- [Go]程序实体
Go语言中的程序实体包括变量.常量.函数.结构体.接口 1.常见声明变量的方式 package main import ( "flag" "fmt" ) fun ...
- [USACO10FEB]慢下来Slowing down
线段树 树的dfs序 来自 洛谷 P1982 的翻译 by GeneralLiu 来自 jzyz 的翻译 %mzx 线段树 dfs序 数据结构的应用 “数据结构 是先有需求 再有应用” ...
- UVALive 4015 树形dp
题目大意: 从一个根节点出发,走最多 x 的长度,问最多能走过多少个节点,图保证是一棵树 dp[0][i][j] , 表示走从i点为根的子树走过了j个点最后回到 i 最少需要多少时间dp[1][i][ ...
- 【dfs+理解题意+构造】【待重做】codeforces E. Ice cream coloring
http://codeforces.com/contest/805/problem/E [题意] 染色数是很好确定,最少染色数是max(si)(最小为1,即使所有的si都为0,这样是单节点树形成的森林 ...