当我们在angularJS中自定义了directive之后需要和controller进行通讯的时候,是怎么样进行通讯呢?

这里介绍3种angular自定义directive与controller通信的指令。

1.指令作用域中的"@"

作用:把当前属性作为字符串传递实现指令与html页面元素关联。

 <!DOCTYPE html>
<html ng-app="demoapp">
<head lang="en">
<meta charset="UTF-8">
<title>angular-directive与controller通信</title> <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script>
</head>
<body>
<div ng-controller="democtrl2">
<!--给tag2赋值的时候要使用表达式-->
<mytag tag2="{{attrd}}"></mytag>
</div> </body>
</html>

js:

 <script>
var demoapp = angular.module('demoapp', []); demoapp.controller('democtrl2', ['$scope', function($scope) { $scope.attrd = 'hello'; }]); //scope中tag2属性值为"@",将tag2作为字符串传递与页面中html实现关联
demoapp.directive('mytag', function() {
return {
restrict:"AE",
scope:{
tag2:'@'
},
template:"<div>{{tag2}}</div>"
};
}); </script>

这里首先在html页面中定义了<mytag></mytag>标签,然后定义tag2属性,然后将在controller中定义的attrd属性赋值给标签中的tag2属性。

然后在js中定义了一个mytag的一个指令,在scope中tag2属性值为"@",这样的话tag2的值就是页面中tag2={{attrd}}中的值,而attrd=“hello”。所以tag2=“hello”。其主要的作用是将<mytag></mytag>标签替换为template中的<div>{{tag2}}</div>。

其实等价于:

 link:function(scope, element, attrs) {//scope为父controller中的scope,element为mytag,attrs为mytag中的属性
scope.tag2 = attrs.tag2;
}

其主要的流程是:

1.通过@实现指令与html页面元素进行关联。

2.在控制器中又实现了与页面的关联。

3.通过html实现了控制器和指令之间的联系。

2.指令作用域中的"="

作用:表示与父scope中的属性进行双向数据绑定

 <!DOCTYPE html>
<html ng-app="demoapp">
<head lang="en">
<meta charset="UTF-8">
<title>angular-directive与controller通信</title> <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script>
</head>
<body>
<div ng-controller="democtrl2">
Ctrl:
<input type="text" ng-model="attrd2"/>
<br/>
Directive:
<mytag2 tag3="attrd2"></mytag2>
</div>
</body>
</html>

js:

 var demoapp = angular.module('demoapp', []);

         demoapp.controller('democtrl2', ['$scope', function($scope) {

             $scope.attrd2 = 'hello2';

         }]);
demoapp.directive('mytag2', function() {
return {
restrict:"AE",
scope:{
tag3:"="
},
template:"<input type='text' ng-model='tag3' />"
};
});

具体流程:

1.在html中定义了一个输入框ng-model绑定了controller中的attrd2,同时定义<mytag2></mytag2>标签,然后将controller中的attrd2赋值给tag3。

2.在指令中scope对象中tag3:"=",则表示与父scope中的属性进行双向数据绑定,具体绑定哪个mytag2标签中已经指定了。然后替换为tamplate中的标签显示。

3.通过"="实现了指定中的属性与父scope中的属性进行双向数据绑定,从而当改变一个值时达到互相影响对方的作用。

3.指令作用域中的"&"

作用:表示与父scope中的函数进行传递,稍后进行调用。

 <!DOCTYPE html>
<html ng-app="demoapp">
<head lang="en">
<meta charset="UTF-8">
<title>angular-directive与controller通信</title> <script src="js/angularjs1.4/angular-1.4.6.mini.js"></script>
</head>
<body>
<div ng-controller="democtrl2">
<mytag3 tagfn="attrd_fn(name)"></mytag3> <span>{{fruit}}</span> </div>
</body>
</html>

js:

 var demoapp = angular.module('demoapp', []);

        demoapp.controller('democtrl2', ['$scope', function($scope) {

             //方法传入参数的名称和下面自定义的directive中对象的属性名称要一致
$scope.attrd_fn = function(name) {
$scope.fruit = name;
} }]); demoapp.directive('mytag3', function() {
return {
restrict:"AE",
scope:{
tagfn:"&" //属性不能有下划线
},
template:"<input type='text' ng-model='fruitname'/><button ng-click='tagfn({name:fruitname})'>水果名字</button>" //对象传入的属性名称和controller中方法传入的参数名称一致 };
});

具体流程:

1.页面中定义了<mytag3></mytag3>标签,标签中tagfn属性等于controller中定义的attrd_fn函数。

2.自定义mytag3指令中tagfn:"&"则表示directive与controller之间主要进行的是函数的传递。同时将页面上的标签替换为template中的内容。

3.通过页面中tagfn="attrd_fn(name)",template中ng-click时触发的tagfn函数来自controller中的attrd_fn;同时tagfn函数传入的是一个对象,对象的属性名字要和controller中attrd_fn函数中参数名字一致。

为达到简洁的效果我将页面的显示结果放到了一张图片展示,如下:

angularJS中directive与controller之间的通信的更多相关文章

  1. AngularJS进阶(九)控制器controller之间如何通信

    AngularJS控制器controller之间如何通信 注:请点击此处进行充电! angular控制器通信的方式有三种: 1,利用作用域继承的方式.即子控制器继承父控制器中的内容 2,基于事件的方式 ...

  2. angularJS中directive与directive 之间的通信

    上一篇讲了directive与controller之间的通信:但是我们directive与directive之间的通信呢? 当我们两个directive嵌套使用的时候怎么保证子directive不会被 ...

  3. AngularJS实战之Controller之间的通信

    我们时常会在不同controller之间进行通信,接下来就介绍三种controller之间的通信方式 一.使用$on.$emit和$broadcast进行controller通信 虽然AngularJ ...

  4. angularJS中directive父子组件的数据交互

    angularJS中directive父子组件的数据交互 1. 使用共享 scope 的时候,可以直接从父 scope 中共享属性.使用隔离 scope 的时候,无法从父 scope 中共享属性.在 ...

  5. AngularJS 中 Controller 之间的通信

    用 Angular 进行开发,基本上都会遇到 Controller 之间通信的问题,本文对此进行一个总结. 在 Angular 中,Controller 之间通信的方式主要有三种: 1)作用域继承.利 ...

  6. Angularjs controller之间的通信

    刚刚看了网上的一些关于控制器之间的通信:然后结合自己项目做了一些,这里主要做的是二个同级之间的controller通信. Html: <html> <script src=" ...

  7. angularjs中directive指令与component组件有什么区别?

     壹 ❀ 引 我在前面花了两篇博客分别系统化介绍了angularjs中的directive指令与component组件,当然directive也能实现组件这点毋庸置疑.在了解完两者后,即便我们知道co ...

  8. angularjs 中 Factory,Service,Provider 之间的区别

    本片文章是使用了 angularjs 中使用 service 在controller 之间 share 对象和数据 的code(http://jsfiddle.net/kn46u0uj/1/) 来进行 ...

  9. Android中BroadCast与Activity之间的通信

    在看本文之前,假设你对于Android的广播机制不是非常了解.建议先行阅读我转载的一篇博文:图解 Android 广播机制. 因为本案例比較简单,故直接在此贴出代码,不做过多的阐述. 先上效果截图: ...

随机推荐

  1. linux 路由

  2. yii事件

    控制器: public function actionTests1(){ $c = new \app\components\cat(); $m = new \app\components\mou; $ ...

  3. DNS解析流程

    DNS简单来说就是进行域名和IP的转换,那该如何转换呢?既然要转换,肯定有转换表,那表应该存 哪个服务器上,怎样去请求域名服务器来进行转换,所以,这个转换的过程都是什么.而面试的时 经常会有这道题:当 ...

  4. WordPress多站点获取当前博客信息

    http://www.utubon.com/1495/wordpress-multisite-get-current-bolg-info global $current_blog; 它的返回结果是: ...

  5. linux命令日常总结

    1.date 显示系统日期2. mkdir xx 创建xx目录 rmdir xx 删除xx目录(空目录) rm -rf xx 删除xx目录(非空目录) 3. vi xx 创建某文件 写入-->e ...

  6. ios上的 button和input-button为什么不水平居中的

    在iphone6plus上的button中文本上不居中,如下图: 造成的原因,是button的padding不为零,造成的,因而设置padding: 0:就可以解决

  7. Eexcel批量设定单元格条件格式

    最近在整理excel项目记录,觉得有些技巧还是值得拥有,记录备份下,以防将来使用: [工具/原料] excel(office或wps) [方法/步骤] 1.建立一个追踪表如下: 2.选择状态列,建立数 ...

  8. Android 基于Android的手机邮件收发(JavaMail)之二( Welcome.java 和 ReceiveAndSend.java )

    周末休息,这次我们继上次内容继续.上一篇内容我们讲述的是一些准备工作.下载两个javamail.jar和activation.jar文件,然后再BuildPath~ 言归正传,为了展示效果,在这里我申 ...

  9. NSSet

    版权声明:本文为博主原创文章,未经博主允许不得转载. 一.NSSet的创建和初始化 创建一个空的NSSet集合:+ (void)set; 用数组来创建NSSet集合:+ (id)setWithArra ...

  10. Windows Azure - Troubleshooting & Debugging: Role Recycling

    每年总会碰到几次Role Recycling,处理完记录下 :) 1. 和往常一样先排查系统日志,修复异常.> 没效果 :( 2. 排查Event Viewer中的Logs,没有发现比较奇怪Lo ...