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将iframe中控件的值传到主页面控件中的实现方法
Mar 11 Javascript
js获取select标签选中值的两种方式
Jan 09 Javascript
兼容主流浏览器的jQuery+CSS 实现遮罩层的简单代码
Oct 14 Javascript
IE10中flexigrid无法显示数据的解决方法
Jul 26 Javascript
解决JavaScript数字精度丢失问题的方法
Dec 03 Javascript
Javascript 字符串模板的简单实现
Feb 13 Javascript
JavaScript学习笔记之取数组中最大值和最小值
Mar 23 Javascript
利用VUE框架,实现列表分页功能示例代码
Jan 12 Javascript
如何用RxJS实现Redux Form
Dec 29 Javascript
axios异步提交表单数据的几种方法
Aug 11 Javascript
js实现简易ATM功能
Oct 27 Javascript
Vue Element-ui表单校验规则实现
Jul 09 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
php 日期时间处理函数小结
2009/12/18 PHP
php中使用explode查找某个字符是否存在的方法
2011/07/12 PHP
PHP生成二维码的两个方法和实例
2014/07/01 PHP
jquery中动态效果小结
2010/12/16 Javascript
修改jQuery Validation里默认的验证方法
2012/02/14 Javascript
js 操作select和option常用代码整理
2012/12/13 Javascript
Javascript图像处理—亮度对比度应用案例
2013/01/03 Javascript
用表格输出1-1000之间的数字实现代码(附特效)
2013/04/21 Javascript
JS实现清除指定cookies的方法
2014/09/20 Javascript
jQuery简单实现对数组去重及排序操作实例
2017/10/31 jQuery
JS生成随机打乱数组的方法示例
2017/12/23 Javascript
.vue文件 加scoped 样式不起作用的解决方法
2018/05/28 Javascript
JS实现用特殊符号替换字符串的中间部分区域的实例代码
2018/07/24 Javascript
使用VueRouter的addRoutes方法实现动态添加用户的权限路由
2019/06/03 Javascript
使用pkg打包ThinkJS项目的方法步骤
2019/12/30 Javascript
JS数组方法join()用法实例分析
2020/01/18 Javascript
node.js制作一个简单的登录拦截器
2020/02/10 Javascript
Vue项目移动端滚动穿透问题的实现
2020/05/19 Javascript
vue+element使用动态加载路由方式实现三级菜单页面显示的操作
2020/08/04 Javascript
vue-router 控制路由权限的实现
2020/09/24 Javascript
分享Python字符串关键点
2015/12/13 Python
Python paramiko模块的使用示例
2018/04/11 Python
python 通过logging写入日志到文件和控制台的实例
2018/04/28 Python
对Python3 解析html的几种操作方式小结
2019/02/16 Python
python3 Scrapy爬虫框架ip代理配置的方法
2020/01/17 Python
scrapy在python爬虫中搭建出错的解决方法
2020/11/22 Python
英国No.1文具和办公用品在线:Euroffice
2016/09/21 全球购物
阿巴庭院:Abba Patio
2019/06/18 全球购物
在加拿大在线租赁和购买电子游戏:Game Access
2019/09/02 全球购物
2019年c语言经典面试题目
2016/08/17 面试题
《鲁班和橹板》教学反思
2014/04/27 职场文书
广告业务员岗位职责
2015/02/13 职场文书
2015年百日安全活动总结
2015/03/26 职场文书
无违反计划生育证明格式
2015/06/24 职场文书
仅仅使用 HTML/CSS 实现各类进度条的方式汇总
2021/11/11 HTML / CSS
vue实力踩坑之push当前页无效
2022/04/10 Vue.js