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 相关文章推荐
Js中获取frames中的元素示例代码
Jul 30 Javascript
JavaScript中“过于”犀利地for/in循环使用示例
Oct 22 Javascript
Jquery uploadify图片上传插件无法上传的解决方法
Dec 16 Javascript
每天一篇javascript学习小结(RegExp对象)
Nov 17 Javascript
js实现文本上下来回滚动
Feb 03 Javascript
javascript ES6中箭头函数注意细节小结
Feb 17 Javascript
jQuery控制元素隐藏和显示
Mar 03 Javascript
vue watch自动检测数据变化实时渲染的方法
Jan 16 Javascript
微信小程序冒泡事件及其阻止方法实例分析
Dec 06 Javascript
关于js陀螺仪的理解分析
Apr 11 Javascript
js+html实现周岁年龄计算器
Jun 25 Javascript
js实现for循环跳过undefined值示例
Jul 02 Javascript
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
星际争霸 Starcraft 游戏介绍
2020/03/14 星际争霸
用libtemplate实现静态网页生成
2006/10/09 PHP
php curl 伪造IP来源的实例代码
2012/11/01 PHP
PHP学习笔记之字符串编码的转换和判断
2014/05/22 PHP
destoon之一键登录设置
2014/06/21 PHP
WordPress主题制作中自定义头部的相关PHP函数解析
2016/01/08 PHP
zend framework中使用memcache的方法
2016/03/04 PHP
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
jQuery中:contains选择器用法实例
2014/12/30 Javascript
简介AngularJS中使用factory和service的方法
2015/06/17 Javascript
javascript下拉列表中显示树形菜单的实现方法
2015/11/17 Javascript
jQuery获取访问者IP地址的方法(基于新浪API与QQ查询接口)
2016/05/25 Javascript
javascript构造函数以及原型对象的理解
2017/01/13 Javascript
PHP实现本地图片上传和验证功能
2017/02/27 Javascript
VUE使用vuex解决模块间传值问题的方法
2017/06/01 Javascript
AngularJs 延时器、计时器实例代码
2017/09/16 Javascript
使用Electron构建React+Webpack桌面应用的方法
2017/12/15 Javascript
vue如何在自定义组件中使用v-model
2018/05/14 Javascript
用图片替换checkbox原始样式并实现同样的功能
2018/11/15 Javascript
vue实现带过渡效果的下拉菜单功能
2020/02/19 Javascript
python在windows下创建隐藏窗口子进程的方法
2015/06/04 Python
python中将字典形式的数据循环插入Excel
2018/01/16 Python
关于Tensorflow分布式并行策略
2020/02/03 Python
浅谈Django QuerySet对象(模型.objects)的常用方法
2020/03/28 Python
python 使用csv模块读写csv格式文件的示例
2020/12/02 Python
python 制作网站小说下载器
2021/02/20 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
印度和世界各地的精美产品:Ikka Dukka
2018/02/12 全球购物
德国最新街头服饰网上商店:BODYCHECK
2019/09/15 全球购物
介绍一下XMLHttpRequest对象的常用方法和属性
2013/05/24 面试题
委托代理人授权委托书范本
2014/09/24 职场文书
2014年行风建设工作总结
2014/12/01 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
Redis 持久化 RDB 与 AOF的执行过程
2021/11/07 Redis
php双向队列实例讲解
2021/11/17 PHP
Win10 Anaconda安装python-pcl
2022/04/29 Servers