AngularJS指令与指令之间的交互功能示例


Posted in Javascript onDecember 14, 2016

本文实例讲述了AngularJS指令与指令之间的交互功能。分享给大家供大家参考,具体如下:

前面一篇文章《AngularJS指令与控制器之间的交互功能示例》我们了解了指令与控制器之间的交互,接下来看看指令与指令之间是如何进行交互的。

1.首先来了解一下什么是独立scope

为了更好的理解独立scope,我们来看一段代码:

<div ng-controller="myController1">
    <hello></hello>
    <hello></hello>
</div>
var app=angular.module('firstApp',[]);//app模块名
  app.controller('myController1',['$scope',function($scope){
}]);
app.directive('hello',function(){
    return{
      restrict:'E',
      template:"<div><input type='text' ng-  model='username'/>{{username}}",
      replace:true
    }
})

我们定义了一个指令,并在html中调用了两次,我们发现,调用两次的结果为:使用同一个指令构建的scope共享了一个数据,结果如下,我们在一个输入框中输入数据,会改变第二个指令中的输入框

AngularJS指令与指令之间的交互功能示例

如何解决这个问题呢,我们需要给指令生成独立的scope,每次使用指令时,生成的scope都是独立的,我们只需要如此修改:

app.directive('hello',function(){
    return{
      restrict:'E',
      scope:{},
      template:"<div><input type='text' ng-model='username'/>{{username}}",
      replace:true
    }
})

结果如下:

AngularJS指令与指令之间的交互功能示例

2.指令与指令之间的交互,指令的继承

(1)首先我们定义了一个父指令,定义的方式如下:

app.directive('father',function(){
    return{
     restrict:'E',
     scope:{},
     controller:function($scope){
      this.mean1=function(){
       console.log('这是第一个方法....');
      };
      this.mean2=function(){
       console.log('这是第二个方法....');
      };
      this.mean3=function(){
       console.log('这是第三个方法....');
      }
     }
    }
});

我们注意到,指令里面也有controller,这里的controller与控制器定义过程中的不同,这里的controller指的是指令的独立scope中定义的一些方法。

(2)定义子指令,子指令中可以使用父指令中scope中的方法:

app.directive('childFirst',function(){
    require:'^father',
    link:function(scope,ele,attr,fatherCtrl){
      fatherCtrl.mean1();
    }
})

这样通过:

require:'^father'

子指令就可以继承并且使用父指令中,独立scope中的一些方法。此时我们的link函数就可以有第四个参数。

link和controller中方法的区别:

link中的方法是需要执行或者马上要执行的方法。

controller中的方法是希望暴露出来,给外部使用的一些方法。

总结:

指令之间的交互,是通过指令的controller中暴露出来的方法,给外部指令使用。

希望本文所述对大家AngularJS程序设计有所帮助。

Javascript 相关文章推荐
基于Jquery的温度计动画效果
Jun 18 Javascript
js用typeof方法判断undefined类型
Jul 15 Javascript
特殊日期提示功能的实现方法
Jun 16 Javascript
JS 终止执行的实现方法
Nov 24 Javascript
又一款MVVM组件 构建自己的Vue组件(2)
Mar 13 Javascript
jquery+css3实现熊猫tv导航代码分享
Feb 12 jQuery
axios 实现post请求时把对象obj数据转为formdata
Oct 31 Javascript
vue点击页面空白处实现保存功能
Nov 06 Javascript
javascript自定义右键菜单插件
Dec 16 Javascript
js实现盒子拖拽动画效果
Aug 09 Javascript
vue实现两个区域滚动条同步滚动
Dec 13 Vue.js
Vue仿百度搜索功能
Dec 28 Vue.js
AngularJS指令与控制器之间的交互功能示例
Dec 14 #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
You might like
手冲咖啡应该是现代精品咖啡店的必备选项吗?
2021/03/03 冲泡冲煮
NO3第三帝国留言簿制作过程
2006/10/09 PHP
微信支付PHP SDK之微信公众号支付代码详解
2015/12/09 PHP
PHP调试及性能分析工具Xdebug详解
2017/02/09 PHP
jQuery源码中的chunker 正则过滤符分析
2012/07/31 Javascript
Jquery插件写法笔记整理
2012/09/06 Javascript
jquery中$(#form :input)与$(#form input)的区别
2014/08/18 Javascript
jQuery插件Zclip实现完美兼容个浏览器点击复制内容到剪贴板
2015/04/30 Javascript
JS简单实现动画弹出层效果
2015/05/05 Javascript
Bootstrap每天必学之缩略图与警示窗
2015/11/29 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
JQuery form表单提交前验证单选框是否选中、删除记录时验证经验总结(整理)
2017/06/09 jQuery
vue综合组件间的通信详解
2017/11/06 Javascript
AngularJS遍历获取数组元素的方法示例
2017/11/11 Javascript
js 判断一个数字是不是2的n次方幂的实例
2017/11/26 Javascript
vue学习笔记五:在vue项目里面使用引入公共方法详解
2019/04/04 Javascript
微信小程序实现多选框全选与取消全选功能示例
2019/05/14 Javascript
vue实现的请求服务器端API接口示例
2019/05/25 Javascript
vue中利用Promise封装jsonp并调取数据
2019/06/18 Javascript
微信小程序实现拨打电话功能的示例代码
2020/06/28 Javascript
jquery实现拖拽添加元素功能
2020/12/01 jQuery
[06:35]2014DOTA2国际邀请赛 老男孩梦圆西雅图中国军团世界最强
2014/07/22 DOTA
Python socket模块实现的udp通信功能示例
2019/04/10 Python
python实现Dijkstra算法的最短路径问题
2019/06/21 Python
Python 字符串类型列表转换成真正列表类型过程解析
2019/08/26 Python
Python进程,多进程,获取进程id,给子进程传递参数操作示例
2019/10/11 Python
微信小程序canvas实现水平、垂直居中效果
2020/02/05 HTML / CSS
纽约和芝加哥当天送花:Ode à la Rose
2019/07/05 全球购物
初婚初育证明
2014/01/14 职场文书
中专毕业生自我鉴定
2014/02/02 职场文书
一年级小学生评语
2014/04/22 职场文书
四风问题对照检查材料思想汇报
2014/10/07 职场文书
三八妇女节标语
2014/10/09 职场文书
毕业班班主任工作总结2015
2015/07/23 职场文书
mysql事务对效率的影响分析总结
2021/10/24 MySQL
postgresql中如何执行sql文件
2023/05/08 PostgreSQL