AngularJS指令与控制器之间的交互功能示例


Posted in Javascript onDecember 14, 2016

本文实例讲述了AngularJS指令与控制器之间的交互功能。分享给大家供大家参考,具体如下:

本节我们来看控制器与指令之间的交互

1.首先来看最简单的,在指令中调用父控制器的方法:

<div ng-controller="myController1">
</div>
app.controller('myController1',['$scope',function($scope){
    $scope.load=function(){
     console.log('正在加载数据......');
    }
}]);
app.directive('myTest',function(){
    return{
      restrict:'E',
      link:function(scope,ele,attr){
        ele.bind('mouseenter',function(){
          scope.load();
        })
      }
    }
})

在第一节中,我们已经知道了如何在指令的scope参数中调用父控制器中的方法,这里的:

scope.load();

也可以写成:

scope.$apply('load()');

2.同一个指令,在动态调用多个父类控制器中的方法:

<div ng-controller="myController1" loadMore="load1()"</div>
<div ng-controller="myController2" loadMore="load2()"></div>
app.controller('myController1',['$scope',function($scope){
    $scope.load1=function(){
     console.log('正在加载数据......');
    }
}]);
app.controller('myController2',['$scope',function($scope){
    $scope.load2=function(){
    console.log('正在加载数据........');
    }
}]);
app.directive('myTest',function(){
    return{
      restrict:'E',
      link:function(scope,ele,attr){
        ele.bind('mouseenter',function(){
          scope.$apply(attr.loadmore())
        })
      }
    }
})

注意这里:

scope.$apply(attr.loadmore());

loadmore是小写,而在html中,属性是通过驼峰法则得到的。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
checkbox 多选框 联动实现代码
Oct 22 Javascript
表头固定(利用jquery实现原理介绍)
Nov 08 Javascript
jquery实现文字由下到上循环滚动的实例代码
Aug 09 Javascript
3分钟写出来的Jquery版checkbox全选反选功能
Oct 23 Javascript
js实现的牛顿摆效果
Mar 31 Javascript
js+css实现文字散开重组动画特效代码分享
Aug 21 Javascript
以JavaScript来实现WordPress中的二级导航菜单的方法
Dec 14 Javascript
JavaScript常用代码书写规范的超全面总结
Sep 11 Javascript
微信小程序返回多级页面的实现方法
Oct 27 Javascript
详解create-react-app 2.0版本如何启用装饰器语法
Oct 23 Javascript
详解Vue项目部署遇到的问题及解决方案
Jan 11 Javascript
TypeScript中条件类型精读与实践记录
Oct 05 Javascript
网站申请不到支付宝接口、微信接口,免接口收款实现方式几种解决办法
Dec 14 #Javascript
AngularJS定时器的使用与移除操作方法【interval与timeout】
Dec 14 #Javascript
本地Bootstrap文件字体图标引入却无法显示问题的解决方法
Apr 18 #Javascript
微信小程序中使元素占满整个屏幕高度实现方法
Dec 14 #Javascript
AngularJS基于ngInfiniteScroll实现下拉滚动加载的方法
Dec 14 #Javascript
bootstrap modal弹出框的垂直居中
Dec 14 #Javascript
微信小程序 免费SSL证书https、TLS版本问题的解决办法
Dec 14 #Javascript
You might like
基于PHP编程注意事项的小结
2013/04/27 PHP
PHP生成自适应大小的缩略图类及使用方法分享
2014/05/06 PHP
php实现mysql备份恢复分卷处理的方法
2014/12/26 PHP
Yii2框架中一些折磨人的坑
2019/12/15 PHP
一个关于jqGrid使用的小例子(行按钮)
2011/11/04 Javascript
一个页面放2段图片滚动代码出现冲突的问题如何解决
2012/12/21 Javascript
ajax中get和post的说明及使用与区别
2012/12/23 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
jquery ajax局部加载方法详解(实现代码)
2016/05/12 Javascript
jQuery+ajax实现实用的点赞插件代码
2016/07/06 Javascript
Vue.js每天必学之计算属性computed与$watch
2016/09/05 Javascript
jQuery层次选择器用法示例
2016/09/09 Javascript
vue-rx的初步使用教程
2018/09/21 Javascript
微信小程序生成分享海报方法(附带二维码生成)
2019/03/29 Javascript
vue组件之间的数据传递方法详解
2019/04/19 Javascript
vuejs移动端实现div拖拽移动
2019/07/25 Javascript
ant design vue导航菜单与路由配置操作
2020/10/28 Javascript
手写Vue2.0 数据劫持的示例
2021/03/04 Vue.js
Python反射的用法实例分析
2018/02/11 Python
python绘制简单彩虹图
2018/11/19 Python
Django实现跨域请求过程详解
2019/07/25 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
详解Python 重学requests发起请求的基本方式
2020/02/07 Python
python GUI库图形界面开发之PyQt5拖放控件实例详解
2020/02/25 Python
python3 正则表达式基础廖雪峰
2020/03/25 Python
详解python第三方库的安装、PyInstaller库、random库
2021/03/03 Python
HTML5 背景的显示区域实现
2020/07/09 HTML / CSS
商务日语专业毕业生求职信
2013/10/26 职场文书
专科毕业生自我鉴定
2013/12/01 职场文书
《彭德怀和他的大黑骡子》教学反思
2014/04/12 职场文书
班风口号
2014/06/18 职场文书
2014大学生职业生涯规划书最新范文
2014/09/13 职场文书
五一劳动节活动总结
2015/02/09 职场文书
留学推荐信中文范文
2015/03/26 职场文书
社区文明创建工作总结2015
2015/04/21 职场文书