详解angularjs中如何实现控制器和指令之间交互
如果我们具有下面的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中调用了!
总结：之所以定义指令就是为了复用，为了让指令和不同的控制器进行交互就会为指令定义不同的配置项，这就是指令和控制器进行数据交互的原理之所在!
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。
相关推荐
-
AngularJS创建自定义指令的方法详解
本文实例讲述了AngularJS创建自定义指令的方法.分享给大家供大家参考,具体如下: 这是一篇译文,来自angular开发者说明的指令.主要面向已经熟悉angular开发基础的开发者.这篇文档解释了什么情况下需要创建自己的指令,和如何去创建指令. 什么是指令 从一个高的层面来讲,指令是angular $compile服务的说明,当特定的标签(属性,元素名,或者注释) 出现在DOM中的时候,它让编译器附加指定的行为到DOM上. 这个过程是很简单的.angular内部有很用这样自带的指令,比如说n
-
AngularJS指令与控制器之间的交互功能示例
本文实例讲述了AngularJS指令与控制器之间的交互功能.分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: <div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加
-
AngularJS实现自定义指令与控制器数据交互的方法示例
本文实例讲述了AngularJS实现自定义指令与控制器数据交互的方法.分享给大家供大家参考,具体如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>AngularJS自定义指令与控制器数据交互</title> <!-- <script src="http://cdn.bootcss.com/angular.js/1.3
-
深入讲解AngularJS中的自定义指令的使用
AngularJS的自定义指令,就是你自己的指令,加上编译器编译DOM时运行的原生核心函数.这可能很难理解.现在,假设我们想在应用中不同页面复用一些特定的代码,而又不复制代码.那么,我们就可以简单地把这段代码放到单独的文件,并调用使用自定义指令的代码,而不是一遍又一遍地敲下来.这样的代码更容易理解.AngularJS中有四种类型的自定义指令: 元素指令 属性指令 CSS class 指令 注释指令 在我们现有的app中实现他们之前,我们来看看自定义指令是个什么样子: 元素指令 在html中写
-
Angularjs自定义指令实现三级联动 选择地理位置
Angularjs自定义指令实现三级联动效果,先上图 代码 <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport&quo
-
AngularJs中 ng-repeat指令中实现含有自定义指令的动态html的方法
今天用angular写table的时候,遇到了一个问题.在ng-repeat中,含有动态的html,而这些html中含有自定义指令. 因为希望实现一个能够复用的table,所以定义了一个指令myStandTable,指令代码大概如下: var myCommon = angular.module("myCommon",[]); myCommon.directive("myStandTable", function () { return { restrict: &qu
-
AngularJS使用自定义指令替代ng-repeat的方法
前言 大家都知道对于处理小数量,ng-repeat是非常有用的,但是如果需要处理非常大的数量集,还是采用自定义的方法更好一些.特别是数据大多都是静态的或已预存储好的,这个时候应避免使用ng-repeat指令. ng-repeat中的表达式和 $watch Angular中的表达式都会创建$watch 的Scope 函数.用于监听模型变化,当你的模型部分发生变化时它会通知你.在ng-repeat指令中,如果某行数据有15列数据都绑定了表达式,如果数据有1000多行的话,那么$watch就又奖金15
-
angularjs 表单密码验证自定义指令实现代码
html代码 <form name="form"> <input type="password" name="password" ng-model="password" required placeholder="请输入密码"> <input type="password" name="passwordConfirm" ng-model=
-
AngularJS自定义指令之复制指令实现方法
本文实例讲述了AngularJS自定义指令之复制指令实现方法.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="bootstrap.min.c
-
Angularjs使用directive自定义指令实现attribute继承的方法详解
本文实例讲述了Angularjs使用directive自定义指令实现attribute继承的方法.分享给大家供大家参考,具体如下: 一.Html代码: <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8&
-
详解AngularJS中自定义指令的使用
自定义指令中使用AngularJS扩展HTML的功能.自定义指令使用的"指令"的功能定义.自定义指令只是替换了它被激活的元素.引导过程中AngularJS应用程序找到了匹配的元素,并做好使用自定义指令compile()方法一次活动再处理使用基于指令的范围自定义指令link()方法的元素. AngularJS提供支持,以下列元素的类型来创建自定义指令. Element directives - 指令遇到时激活一个匹配的元素. Attribute - - 指令遇到时激活一个匹配的属性. C
-
AngularJS自定义指令实现面包屑功能完整实例
本文实例讲述了AngularJS自定义指令实现面包屑功能.分享给大家供大家参考,具体如下: <!DOCTYPE html> <html lang="zh-CN" ng-app="myApp"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"