前言:

  前段时间我们学习了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-指令和控制器交互的更多相关文章

  1. AngularJS: 自定义指令与控制器数据交互

    <!doctype html> <html> <head> <meta charset="utf-8"> <title> ...

  2. AngularJs开发——指令与控制器间的通信

    (原文:http://www.html5jscss.com/controller-between-directive.html) 指令与控制器之间通信,跟控制器间的通信.指令间通信也类似,也是下几种方 ...

  3. AngularJs-指令和指令之间的交互(动感超人)

    前言: 上节我们学习到了指令和控制器之间的交互,通过给指令添加动作,调用了控制器中的方法.本节我们学习指令和指令之间是如何交互的,我们通过一个小游戏来和大家一起学习,听大漠老师说这是国外的人写的dem ...

  4. AngularJs指令(一)

    AngularJs应用现在越来越流行了,谷歌都与微软合作支持AngularJS2.0,这是要逆天了,说明AngularJs将来大势所趋.最近想跳槽,又重新拾起了AngluarJs(之前由于缺少项目应用 ...

  5. AngularJS指令进阶 – ngModelController详解

    AngularJS指令进阶 – ngModelController详解 在自定义Angular指令时,其中有一个叫做require的字段,这个字段的作用是用于指令之间的相互交流.举个简单的例子,假如我 ...

  6. angularJS 指令解释

    本文引自 http://blog.csdn.net/kongjiea/article/details/49840035 指令,很重要 AngularJS与jQuery最大的区别在哪里?我认为,表现在数 ...

  7. angularJs 指令的封装

    首先 指令的应用场景: 1:使你的html更具语义化,不需要深入研究代码就可以知道页面的大概逻辑. 2:抽象出一个自定义组件,在其他的地方进行重用. 一:directive的定义及其使用方法: 下面是 ...

  8. AngularJS 指令解析(二)

    AngularJS 指令解析(二) 第一篇我们讲过了作用域(scope)这块内容,现在我们进入正题,讲AngularJS的指令. 什么是指令? 这里我们引用官方的一句话: Custom directi ...

  9. AngularJS 指令实践指南(二)

    这个系列教程的第一部分给出了AngularJS指令的基本概述,在文章的最后我们介绍了如何隔离一个指令的scope.第二部分将承接上一篇继续介绍.首先,我们会看到在使用隔离scope的情况下,如何从指令 ...

随机推荐

  1. Swift 学习笔记 enum 枚举类型

    异端,异端啊,我感觉这是map吧? enum ATMStatus { case Success(Int) case Error(String) } func withdraw(amount: Int) ...

  2. 关于 Python 你需要知道的几个概念

    Python 一种支持面向对象和函数式(面向过程)的高级编程语言 CPython 由 C 语言编译,一种默认的,通常我们所提及的基于 C 的 Python 的一种实现 Cython 一种 Python ...

  3. Python pip – error: invalid command ‘bdist_wheel’

    原文@http://software-engineer.gatsbylee.com/python-pip-error-invalid-command-bdist_wheel/ Python pip – ...

  4. 1644 免费馅饼 题解(c++)(S.B.S.)

    1644 免费馅饼(巴蜀oj上的编号) 题面:          SERKOI最新推出了一种叫做“免费馅饼”的游戏.         游戏在一个舞台上进行.舞台的宽度为W格,天幕的高度为H格,游戏者占 ...

  5. poj 1463 Strategic game DP

    题目地址:http://poj.org/problem?id=1463 题目: Strategic game Time Limit: 2000MS   Memory Limit: 10000K Tot ...

  6. UESTC 288 青蛙的约会 扩展GCD

    设两只青蛙跳了t步,则此时A的坐标:x+mt,B的坐标:y+nt.要使的他们在同一点,则要满足: x+mt - (y+nt) = kL (p是整数) 化成: (n-m)t + kL = x-y (L ...

  7. HDU 2065 “红色病毒”问题 --指数型母函数

    这种有限制的类棋盘着色问题一般可以用指数型母函数来解决,设Hn表示这样的着色数,首先H0=1,则Hn等于四个字母的(A,B,C,D)的多重集合的n排列数,其中每个字母的重数是无穷,且要求A,C出现的次 ...

  8. java 20 - 5 字节输出流写出数据的一些方法

    首先回顾下 字节输出流操作步骤:  A:创建字节输出流对象  B:调用write()方法  C:释放资源 创建字节流输出对象 FileOutputStream fos = new FileOutput ...

  9. LinkedList方法总结 ListIterator和Iterator的区别

    LinkedList也像ArrayList一样实现了基本的接口,但是它执行某些从操作时比ArrayList更高效,但在随机访问方面要逊色一些.LinkedList中有一些方法虽然名字不同,但可以完成相 ...

  10. 逆向最大匹配分词算法C#

    逆向顺序 句子:大家好我叫XX我是一名程序员 程序员 -> 序员 -> 员 名程序 -> 程序 -> 序 一名程 -> 名程 -> 程 是一名 -> 一名 - ...