有时候,自定义的Directive中需要调用controller中的方法,即Directive与controller有一定的耦合度。

比如有如下的一个controller:

app.controller('MyCtrl',function($scope){
$scope.load = function(){
console.log('loading more...')
}
});

现在自定义一个Direcitve,需要调用MyCtrl这个controller中的load方法。

app.directive('enter', function(){
return function($scope, ele, attrs){
ele.bind('mouseenter', function(){
$scope.load();
})
}
})

页面这样调用:

 <div ng-controller="MyCtrl">
<div enter>enter to load more</div>
</div>

如果想调用MyCtrl中的其它方法呢?这时候就需要更改direcitve中的编码。由此可见在directive以硬编码的方法是调用controller中的方法是不太合理的。

那么把变化的可能性放在页面上会怎样呢?

给enter一个属性值,该属性值表示调用哪个方法。

  <div ng-controller="MyCtrl">
<div enter="load()">enter to load more</div>
</div>

这样,总比在directive中硬编码要灵活一些。

directive相应改成这样:

app.directive('enter', function(){
return function($scope, ele, attrs){
ele.bind('mouseenter', function(){
$scope.$apply('load()');
})
}
})

可是,以上写法还不是最合理的,因为在调用上下文的$apply方法的时候传入的实参也是字符串。

别忘了,link函数中还有一个形参attrs,通过这个可以获取任意属性值。

app.directive('enter', function(){
return function($scope, ele, attrs){
ele.bind('mouseenter', function(){
$scope.$apply(attrs.enter);
})
}
})

AngularJS自定义Directive与controller的交互的更多相关文章

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

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

  2. angularJS中directive与controller之间的通信

    当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢? 这里介绍3种angular自定义directive与controller通信的 ...

  3. AngularJS自定义Directive中link和controller的区别

    在AngularJS中,自定义Directive过程中,有时用link和controller都能实现相同的功能.那么,两者有什么区别呢? 使用link函数的Directive 页面大致是: <b ...

  4. AngularJS自定义Directive不一定返回对象

    AngularJS中,当需要自定义Directive时,通常返回一个对象,就像如下的写法: angular.module('modulename') .directive('myDirective', ...

  5. AngularJS自定义Directive初体验

    通常我们这样定义个module并随之定义一个controller. var app = angular.module('myApp', []); app.controller('CustomersCo ...

  6. AngularJS自定义Directive

    (编辑完这篇之后,发现本篇内容应该属于AngularJS的进阶,内容有点多,有几个例子偷懒直接用了官方的Demo稍加了一些注释,敬请见谅). 前面一篇介绍了各种常用的AngularJS内建的Direc ...

  7. 【转载】AngularJs 指令directive之controller,link,compile

    关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-controller.不过你可千万不要用 ng-前缀了,防止与系统自带的指令重名.另外一个需知道的 ...

  8. 49.AngularJs 指令directive之controller,link,compile

    转自:https://www.cnblogs.com/best/tag/Angular/ 关于自定义指令的命名,你可以随便怎么起名字都行,官方是推荐用[命名空间-指令名称]这样的方式,像ng-cont ...

  9. angularJs中自定义directive的数据交互

    首先放官方文档地址:https://docs.angularjs.org/guide/directive 就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模 ...

随机推荐

  1. shell脚本 ------ 输出带颜色的字体

    shell脚本中echo显示内容带颜色显示,echo显示带颜色,需要使用参数-e 格式如下: echo -e “\033[字背景颜色:文字颜色m字符串\033[0m” 例如: echo -e “\03 ...

  2. Python多线程-2(线程共享全局变量)

    例子: from threading import Thread,Lock from time import sleep, ctime global_num = [] def func1(): glo ...

  3. 使用android模拟器开发程序

    自从android studio升级到3.0之后自带的模拟器已经很好用了,尤其是升级后可以想vmware那样休眠,再次开启就可以快速启动了 以下是几点可以更方便地使用系统模拟器进行开发的小技巧,毕竟模 ...

  4. js各种小知识

    1.获取函数里面的参数个数 function test(x,y,z){} // 获取test参数的个数 console.log(test.length)

  5. 2018ACM/ICPC 青岛现场赛 E题 Plants vs. Zombies

    题意: 你的房子在0点,1,2,3,...,n(n<=1e5)点每个点都有一颗高度为0的花,浇一次水花会长a[i]. 你有一个机器人刚开始在你家,最多走m步,每一步只能往前走或者往后走,每走到一 ...

  6. ***在PHP语言中使用JSON和将json还原成数组(json_decode()的常见错误)

    在之前我写过php返回json数据简单实例,刚刚上网,突然发现一篇文章,也是介绍json的,还挺详细,值得参考.内容如下 从5.2版本开始,PHP原生提供json_encode()和json_deco ...

  7. CCF计算机职业资格认证考试题解

    CCF计算机职业资格认证考试题解系列文章为meelo原创,请务必以链接形式注明本文地址 CCF计算机职业资格认证考试题解 CCF计算机软件能力认证(简称CCF CSP认证)是CCF计算机职业资格认证系 ...

  8. element-ui的rules中正则表达式

    <template> <el-form :model="unuseForm" label-position="top" :rules=&quo ...

  9. H5中canvas标签制作在线画板

    1.介绍 左键点击下移动开始画图.放开鼠标不在画图. 2.重要使用理论 query的使用: 鼠标的按下mousedown 鼠标的移动mousemove 鼠标的放开 mouseup 3.程序 <! ...

  10. 对怎样充分利用安卓官方开发网站的一个简单性介绍介绍-https://developer.android.google.cn/docs/

    一,谷歌的安卓官方网站-https://developer.android.google.cn/docs/ ,在网站里面可以查询开发文档,开发指导,设计原则,制作app的例子等等,无论对于新手还是老手 ...