详解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 相关文章推荐
jQuery asp.net 用json格式返回自定义对象
Apr 07 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
Javascript中的变量使用说明
May 18 Javascript
jQuery对象和DOM对象使用说明
Jun 25 Javascript
Node.js中AES加密和其它语言不一致问题解决办法
Mar 10 Javascript
JavaScript中的方法调用详细介绍
Dec 30 Javascript
AngularJS模块管理问题的非常规处理方法
Apr 29 Javascript
WebSocket的简单介绍及应用
May 23 Javascript
VUE注册全局组件和局部组件过程解析
Oct 10 Javascript
安装多版本Vue-CLI的实现方法
Mar 24 Javascript
JavaScript 链表定义与使用方法示例
Apr 28 Javascript
javascript实现移动端触屏拖拽功能
Jul 29 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
一个简单的MySQL数据浏览器
2006/10/09 PHP
PHP Header用于页面跳转要注意的几个问题总结
2008/10/03 PHP
iis下php mail函数的sendmail配置方法(官方推荐)
2012/04/25 PHP
php函数间的参数传递(值传递/引用传递)
2013/09/23 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
php版微信公众平台之微信网页登陆授权示例
2016/09/23 PHP
layui数据表格自定义每页条数limit设置
2019/10/26 PHP
swoole锁的机制代码实例讲解
2021/03/04 PHP
一些不错的js函数ajax
2008/08/20 Javascript
JavaScript 放大镜 移动镜片效果代码
2011/05/09 Javascript
jQuery设置div一直在页面顶部显示的方法
2013/10/24 Javascript
jQuery中animate用法实例分析
2015/03/09 Javascript
浅析JavaScript中的变量复制、参数传递和作用域链
2016/01/13 Javascript
Three.js获取鼠标点击的三维坐标示例代码
2017/03/24 Javascript
easyUI下拉列表点击事件使用方法
2017/05/18 Javascript
JS实现静态页面搜索并高亮显示功能完整示例
2017/09/19 Javascript
Easy UI动态树点击文字实现展开关闭功能
2017/09/30 Javascript
AngularJS与BootStrap模仿百度分页的示例代码
2018/05/23 Javascript
在vue中使用Autoprefixed的方法
2018/07/27 Javascript
vue兄弟组件传递数据的实例
2018/09/06 Javascript
vue实现记事本功能
2019/06/26 Javascript
JavaScript链式调用原理与实现方法详解
2020/05/16 Javascript
Node.js API详解之 zlib模块用法分析
2020/05/19 Javascript
nuxt 路由、过渡特效、中间件的实现代码
2020/11/06 Javascript
[01:21]DOTA2 新英雄 森海飞霞
2020/12/18 DOTA
python logging 日志的级别调整方式
2020/02/21 Python
完美解决torch.cuda.is_available()一直返回False的玄学方法
2021/02/06 Python
利用CSS3实现开门效果实例源码
2016/08/22 HTML / CSS
Ever New加拿大官网:彰显女性美
2018/10/05 全球购物
德国在线香料制造商:Gewürzland
2020/03/10 全球购物
2015年团支书工作总结
2015/04/03 职场文书
少年派的奇幻漂流观后感
2015/06/08 职场文书
机械原理课程设计心得体会
2016/01/15 职场文书
学生安全责任协议书
2016/03/22 职场文书
晶体管单管来复再生式收音机
2021/04/22 无线电
win10双系统怎么删除一个系统?win10电脑有两个系统删除一个的操作方法
2022/07/15 数码科技