详解angularjs中如何实现控制器和指令之间交互


Posted in Javascript onMay 31, 2017

如果我们具有下面的DOM结构:

<div ng-controller="MyCtrl"> 
   <loader>滑动加载</loader> 
</div>

同时我们的控制器具有如下的签名:

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器,第二个参数为一个数组,其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]);

同时指令的签名如下:

myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind('mouseenter', function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑,howToLoad会被转换成小写的howtoload 
      }); 
    } 
  }  
});

这时候我们的指令通过scope.loadData或者scope.$apply就可以完成对控制器的调用了。但是如果我们具有两个控制器呢?而且两个控制器中$scope中方法是不同的?

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器,第二个参数为一个数组,其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]);

这时候在我们的指令中如何调用方法呢,按照上面的方式的话那么那么就会面临问题:MyCtrl2没有我们的loadData,而只有loadData2!这时候我们就需要使用后面的指令自定义属性了!

我们定义了两个controller控制器,分别为MyCtrl,MyCtrl2,这两个控制器都使用了我们自己定义的指令load:

<!doctype html> 
<html ng-app="MyModule"> 
  <head> 
    <meta charset="utf-8"> 
  </head> 
  <body> 
  <!--第一个控制器MyCtrl--> 
    <div ng-controller="MyCtrl"> 
      <loader howToLoad="loadData()">滑动加载</loader> 
    </div> 
    <!--第二个控制器MyCtrl2--> 
    <div ng-controller="MyCtrl2"> 
      <loader howToLoad="loadData2()">滑动加载</loader> 
    </div> 
  </body> 
  <script src="framework/angular-1.3.0.14/angular.js"></script> 
  <script src="Directive&Controller.js"></script> 
</html>

我们自定义了Controller代码如下:

var myModule = angular.module("MyModule", []); 
//首先定义一个模块并在模块下挂载控制器,第二个参数为一个数组,其中函数前面的参数都是会被注入到函数形参上面的 
myModule.controller('MyCtrl', ['$scope', function($scope){ 
  $scope.loadData=function(){ 
    console.log("加载数据中..."); 
  } 
}]); 
myModule.controller('MyCtrl2', ['$scope', function($scope){ 
  $scope.loadData2=function(){ 
    console.log("加载数据中...22222"); 
  } 
}]); 
//在模块下挂载一个loader指令 
myModule.directive("loader", function() { 
  return { 
    restrict:"AE",//Element,Attribute 
    link:function(scope,element,attrs){ 
      element.bind('mouseenter', function(event) { 
        //scope.loadData(); 
        // scope.$apply("loadData()"); 
        // 注意这里的坑,howToLoad会被转换成小写的howtoload 
        // scope.$apply(attrs.howtoload); 
        //其中scope为POJO,但是有一系列的工具方法如$watch,$apply等 
      }); 
    } 
  }  
});

很显然这里有两个控制器,分别为MyCtrl和MyCtrl2,我们的指令如何知道调用那一个Controller?这时候我们就需要为我们的指令指定不同的属性,用这个属性来判断不同的controller调用,这样我们的指令就可以在不同的controller中调用了!

总结:之所以定义指令就是为了复用,为了让指令和不同的控制器进行交互就会为指令定义不同的配置项,这就是指令和控制器进行数据交互的原理之所在!

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
cnblogs TagCloud基于jquery的实现代码
Jun 11 Javascript
jQuery检测输入的字符串包含的中英文的数量
Apr 17 Javascript
jquery实现可自动收缩的TAB网页选项卡代码
Sep 06 Javascript
Javascript实现单例模式
Jan 24 Javascript
基于JS实现密码框(password)中显示文字提示功能代码
May 27 Javascript
Node.js中使用jQuery的做法
Aug 17 Javascript
用v-html解决Vue.js渲染中html标签不被解析的问题
Dec 14 Javascript
JS中的三个循环小结
Jun 20 Javascript
vue中引用swiper轮播插件的教程详解
Aug 16 Javascript
对Vue2 自定义全局指令Vue.directive和指令的生命周期介绍
Aug 30 Javascript
微信小程序的线程架构【推荐】
May 14 Javascript
Node.JS发送http请求批量检查文件中的网页地址、服务是否有效可用
Nov 20 Javascript
详解angularjs中的隔离作用域理解以及绑定策略
May 31 #Javascript
JS简单实现自定义右键菜单实例
May 31 #Javascript
页面间固定参数,通过cookie传值的实现方法
May 31 #Javascript
基于react框架使用的一些细节要点的思考
May 31 #Javascript
Angular 通过注入 $location 获取与修改当前页面URL的实例
May 31 #Javascript
使用原生js写ajax实例(推荐)
May 31 #Javascript
Javascript创建类和对象详解
May 31 #Javascript
You might like
PHP调用三种数据库的方法(2)
2006/10/09 PHP
基于mysql的bbs设计(三)
2006/10/09 PHP
Ping服务的php实现方法,让网站快速被收录
2012/02/04 PHP
PHP读取PDF内容配合Xpdf的使用
2012/11/24 PHP
php的SimpleXML方法读写XML接口文件实例解析
2014/06/16 PHP
PHP实现将科学计数法转换为原始数字字符串的方法
2014/12/16 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
ThinkPHP进程计数类Process用法实例详解
2015/09/25 PHP
PHP实现微信提现(企业付款到零钱)
2019/08/01 PHP
javascript 有趣而诡异的数组
2009/04/06 Javascript
javascript eval和JSON之间的联系
2009/12/31 Javascript
jQuery对象和DOM对象使用说明
2010/06/25 Javascript
document.compatMode的CSS1compat使用介绍
2014/04/03 Javascript
jQuery实现瀑布流布局详解(PC和移动端)
2020/09/01 Javascript
原生JavaScript实现异步多文件上传
2015/12/02 Javascript
Vue.js双向绑定操作技巧(初级入门)
2016/12/27 Javascript
利用Vue.js实现checkbox的全选反选效果
2017/01/18 Javascript
bootstrap的常用组件和栅格式布局详解
2017/05/02 Javascript
Popup弹出框添加数据实现方法
2017/10/27 Javascript
详解如何使用babel进行es6文件的编译
2018/05/29 Javascript
小程序跨页面交互的作用与方法详解
2020/01/07 Javascript
python list中append()与extend()用法分享
2013/03/24 Python
Python生成验证码实例
2014/08/21 Python
解决phantomjs截图失败,phantom.exit位置的问题
2018/05/17 Python
Python File(文件) 方法整理
2019/02/18 Python
使用Python检测文章抄袭及去重算法原理解析
2019/06/14 Python
Pycharm和Idea支持的vim插件的方法
2020/02/21 Python
如何理解Python中包的引入
2020/05/29 Python
python中round函数如何使用
2020/06/19 Python
python中append函数用法讲解
2020/12/11 Python
解决PDF 转图片时丢文字的一种可能方式
2021/03/04 Python
CSS3 Pie工具推荐--让IE6-8支持一些优秀的CSS3特性
2014/09/02 HTML / CSS
HTML5+JS实现俄罗斯方块原理及具体步骤
2013/11/29 HTML / CSS
工程监理应届生求职信
2013/11/09 职场文书
2015新年寄语大全
2014/12/08 职场文书
Mysql数据库group by原理详解
2022/07/07 MySQL