AngularJs-指令和控制器交互
前言:
前段时间我们学习了angular的指令,他通过ECMA的方式创建元素,可以让我们共用这些元素,我们也知道可以通过 link的方法给这个指令添加一些动作事件,本节,我们将写入和让angular的指令能和控制器进行交互。
1,指令和控制器的交互
<!DOCTYPE html>
<html ng-app="MyController">
<head>
<meta charset="utf-8">
<title>指令复用</title>
</head>
<body>
<div ng-controller="MyCtrl">
<loader>滑动加载</loader>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html>
上面的代码平淡无奇,有个控制器有个指令(loader),下面可以看到我们通过 directive创建了这个指令,并且我们通过link的方法给他赋值鼠标事件(mouseenter)。
var myModule = angular.module('MyController',[]); myModule.controller('MyCtrl',function($scope){
$scope.loadData = function(){
console.log("加载数据...");
}
}) myModule.directive('loader',function(){
return{
restrict:'AE',
link:function(scope,element,attr){
element.bind('mouseenter',function(){
scope.loadData();
})
}
}
})
我们来看看运行的结果,ok,我们打印出来 ”加载数据...“。
2,多个控制器如何公用一个指令?
我们创建指令的目的就是在于,能够复用它,当然这也是MVC的终极思想。
我们的代码也发生了一些变化
<!DOCTYPE html>
<html ng-app="MyController">
<head>
<meta charset="utf-8">
<title>指令复用</title>
</head>
<body>
<div ng-controller="MyCtrl">
<loader loadDataFn="loadData()">滑动加载</loader>
</div>
<div ng-controller="MyCtr2">
<loader loadDataFn="loadData2()">滑动加载2</loader>
</div>
</body>
<script src="js/angular-1.3.0.js"></script>
<script src="js/directive-controller.js"></script>
</html>
首先,我们创建了两个控制器 MyCtr1 和 MyCtr2,同时呢,我们给 loader 这个指令,加了一个自定义的属性叫 loadDataFn,给他赋的值是下面js中的两个对应控制器中的方法loadData()和loadData2();
var myModule = angular.module('MyController',[]); myModule.controller('MyCtrl',function($scope){
$scope.loadData = function(){
console.log("加载数据...");
}
})
myModule.controller('MyCtr2',function($scope){
$scope.loadData2 = function(){
console.log("加载数据2...");
}
}) myModule.directive('loader',function(){
return{
restrict:'AE',
link:function(scope,element,attr){
element.bind('mouseenter',function(){
// scope.loadData();
// scope.$apply("loadData()"); scope.$apply(attr.loaddatafn);
})
}
}
})
当然,在指令的 link方法中我们也做了改变,link方法呢,给我提供了四个参数:scope、element、attr和父控制器。我们给元素绑定事件也是通过参数中的 element.bind()完成的,我们也可以通过 attr 属性获取指令上的属性,然后通过$apply的方法来完成调用就好了。在此要提交大家的是,我们在获取指令元素上的属性的时候,一定要注意,我们要把属性的名字写成小写的,这是angularJS的坑。
AngularJs-指令和控制器交互的更多相关文章
- AngularJS: 自定义指令与控制器数据交互
<!doctype html> <html> <head> <meta charset="utf-8"> <title> ...
- AngularJs开发——指令与控制器间的通信
(原文:http://www.html5jscss.com/controller-between-directive.html) 指令与控制器之间通信,跟控制器间的通信.指令间通信也类似,也是下几种方 ...
- AngularJs-指令和指令之间的交互(动感超人)
前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...
- AngularJs指令(一)
AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...
- AngularJS指令进阶 – ngModelController详解
AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...
- angularJS 指令解释
本文引自 http://blog.csdn.net/kongjiea/article/details/49840035 指令,很重要 AngularJS与jQuery最大的区别在哪里?我认为,表现在数 ...
- angularJs 指令的封装
首先 指令的应用场景: 1:使你的html更具语义化,不需要深入研究代码就可以知道页面的大概逻辑. 2:抽象出一个自定义组件,在其他的地方进行重用. 一:directive的定义及其使用方法: 下面是 ...
- AngularJS 指令解析(二)
AngularJS 指令解析(二) 第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令. 什么是指令? 这里我们引用官方的一句话: Custom directi ...
- AngularJS 指令实践指南(二)
这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...
随机推荐
- VMware 12Pro 安装MACOS 10.10
前言 最近帮人MacBook PRO重新安装了下10.10,在加上用了IP6,对苹果系统很有好感,所以想自己装个mac系统玩一下.虽然有了surface pro3 但是看了时间久了厌了,好想买个MAC ...
- three Sum
Given an array S of n integers, are there elements a, b, c in S such that a + b + c = 0? Find all un ...
- Java语言中的基本词汇
1.标识符包.类.方法.参数和变量的名称.大小写字母.数字._和$符号的组合,不以数字开始,不能使关键字,不能包括分隔符和换行.(严格区分大小写,最大长度255个字符) 2.字面量 某种类型的值(具 ...
- [cb] Unity Editor 添加右键菜单
需求 为Unity的Editor窗口添加右键菜单 实现代码 // This example shows how to create a context menu inside a custom Edi ...
- java 15 -7 ListIterator 的特有方法
列表迭代器: ListIterator listIterator():List集合特有的迭代器 该迭代器继承了Iterator迭代器,所以,就可以直接使用hasNext()和next()方法. 特有 ...
- android源码在线查看
http://grepcode.com/project/repository.grepcode.com/java/ext/com.google.android/android/
- 用yo命令创建项目
1,npm install -g yo 安装yeoman 2,npm install -g generator-webapp 安装项目脚手架(生成器) 如果安装angular的项目后面则是genera ...
- MVC4 开篇
开篇,肯定不讲技术. 新项目开工了,用到了MVC4,赶快来园子吐槽下. 刚出来一年,学到了一些东西,但是自知比菜鸟还不如,空闲不看书,不练习demo,快吐我吧... 哈哈,吐吧,哥还是一样淡定,淡定, ...
- 【转】【C#】ColorMatrix
ColorMatrix(色彩矩阵),是GDI+里用来调整图片色彩的矩阵. 什么是矩阵,说白了就是C#里的二维数组. 那么这个矩阵调整色彩的原理是什么,他是怎么来调整色彩的呢?这个要从线性代数里的矩阵相 ...
- user database的initial size和dbcc shrinkfile
之前我们讨论了dbcc shrinkfile改变tempdb initial size的情况.而用DBCC Shrinkfile去收缩一个user database,情况就比较简单了.让我们通过一些测 ...