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 相关文章推荐
JQuery 操作select标签实现代码
May 14 Javascript
myEvent.js javascript跨浏览器事件框架
Oct 24 Javascript
JavaScript数据结构与算法之集合(Set)
Jan 29 Javascript
在网页中插入百度地图的步骤详解
Dec 02 Javascript
Vue.js上下滚动加载组件的实例代码
Jul 17 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
jquery select插件异步实时搜索实例代码
Oct 20 jQuery
JavaScript程序设计高级算法之动态规划实例分析
Nov 24 Javascript
使用 Vue 绑定单个或多个 Class 名的实例代码
Jan 08 Javascript
vue微信分享到朋友圈 vue微信发送给好友
Nov 28 Javascript
深度了解vue.js中hooks的相关知识
Jun 14 Javascript
Vue2.0 实现页面缓存和不缓存的方式
Nov 12 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
递归列出所有文件和目录
2006/10/09 PHP
php checkdate、getdate等日期时间函数操作详解
2010/03/11 PHP
php中PDO方式实现数据库的增删改查
2015/05/17 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
弹出层之1:JQuery.Boxy (一) 使用介绍
2011/10/06 Javascript
NodeJS 模块开发及发布详解分享
2012/03/07 NodeJs
浅谈javascript中的作用域
2012/04/07 Javascript
js实现的折叠导航示例
2013/11/29 Javascript
使用原生js封装webapp滑动效果(惯性滑动、滑动回弹)
2014/05/06 Javascript
JavaScript代码应该放在HTML代码哪个位置比较好?
2014/10/16 Javascript
基于jQuery实现歌词滚动版音乐播放器的代码
2016/09/17 Javascript
Javascript之面向对象--接口
2016/12/02 Javascript
浅谈JavaScript中的apply/call/bind和this的使用
2017/02/26 Javascript
JS实现浏览器打印、打印预览示例
2017/02/28 Javascript
详解jQuery中的easyui
2018/09/02 jQuery
vue中如何实现后台管理系统的权限控制的方法示例
2018/09/19 Javascript
react 应用多入口配置及实践总结
2018/10/17 Javascript
vue双击事件2.0事件监听(点击-双击-鼠标事件)和事件修饰符操作
2020/07/27 Javascript
python基础教程之元组操作使用详解
2014/03/25 Python
python+Django+apache的配置方法详解
2016/06/01 Python
python3 unicode列表转换为中文的实例
2018/10/26 Python
python多线程http压力测试脚本
2019/06/25 Python
对python 中class与变量的使用方法详解
2019/06/26 Python
Django 设置多环境配置文件载入问题
2020/02/25 Python
python如何进行矩阵运算
2020/06/05 Python
python自动化办公操作PPT的实现
2021/02/05 Python
教你如何一步一步用Canvas写一个贪吃蛇
2018/10/22 HTML / CSS
印尼在线精品店:Berrybenka.com
2016/10/22 全球购物
Looking4Parking美国:全球排名第一的机场停车比较品牌
2019/08/26 全球购物
大学生村官事迹材料
2014/01/21 职场文书
教师网络培训感言
2014/03/09 职场文书
公职人员索取回扣检举信
2014/04/04 职场文书
工厂门卫岗位职责范本
2014/04/04 职场文书
秋天的怀念教学反思
2014/04/28 职场文书
写给医生的感谢信
2015/01/22 职场文书
沈阳故宫导游词
2015/01/31 职场文书