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

本文实例讲述了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共享了一个数据,结果如下,我们在一个输入框中输入数据,会改变第二个指令中的输入框

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

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

结果如下:

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相关内容感兴趣的读者可查看本站专题:《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

(0)

相关推荐

  • AngularJS指令与控制器之间的交互功能示例

    本文实例讲述了AngularJS指令与控制器之间的交互功能.分享给大家供大家参考,具体如下: 本节我们来看控制器与指令之间的交互 1.首先来看最简单的,在指令中调用父控制器的方法: <div ng-controller="myController1"> </div> app.controller('myController1',['$scope',function($scope){ $scope.load=function(){ console.log('正在加

  • AngularJS中$http的交互问题

    这篇文章,主要是通过我们熟悉的jquery中ajax和jsonp的类型方式,总结一下$http的使用. $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据. 1. angular中的ajax 写法一: $http({ method: 'GET', //可以改成POST url: '/someUrl' }).then(function successCallback(response) { // 请求成功执行代码 }, function errorCallback(re

  • AngularJS入门教程之与服务器(Ajax)交互操作示例【附完整demo源码下载】

    本文实例讲述了AngularJS与服务器Ajax交互操作.分享给大家供大家参考,具体如下: AngularJS从Web服务器请求资源都是通过Ajax来完成,所有的操作封装在$http服务中,$http服务是只能接收一个参数的函数,这个参数是一个对象,用来完成HTTP请求的一些配置,函数返回一个对象,具有success和error两个方法. 用法如下: $http({method:'post',url:'loginAction.do' }).success(function(data,status

  • angularjs实现与服务器交互分享

    真正的应用需要和真实的服务器进行交互,移动应用和新兴的Chrome桌面应用可能是个例外,但是对于此外的所有应用来说,无论你是想把数据持久化到云端,还是需要与其他用户进行实时交互,都需要让应用与服务器进行交互. 为了实现这一点,Angular提供了一个叫做$http的服务.它提供了一个可扩展的抽象方法列表,使得与服务器的交互更加容易.它支持HTTP.JSONP和CORS方式.它还包含了安全性支持,避免JSON格式的脆弱性和XSRF.它让你可以轻松地转换请求和响应数据,甚至还实现了简单的缓存. 例如

  • 详解angularJs中自定义directive的数据交互

    就我对directive的粗浅理解,它一般用于独立Dom元素的封装,应用场合为控件重用和逻辑模块分离.后者我暂时没接触,但数据交互部分却是一样的.所以举几个前者的例子,以备以后忘记. directive本身的作用域$scope可以选择是否封闭,不封闭则和其controller共用一个作用域$scope.例子如下: <body ng-app="myApp" ng-controller="myCtrl"> <test-directive><

  • angularJS之$http:与服务器交互示例

    在angularJS中与远程HTTP服务器交互时会用一个非常关键的服务-$http. $http是angular中的一个核心服务,利用浏览器的xmlhttprequest或者via JSONP对象与远程HTTP服务器进行交互. $http的使用方式和jquery提供的$.ajax操作比较相同,均支持多种method的请求,get.post.put.delete等. $http的各种方式的请求更趋近于rest风格. 在controller中可通过与$scope同样的方式获取$http对象,e.g.

  • 详解AngularJs中$resource和restfu服务端数据交互

    $resource 创建一个resource对象的工厂函数,可以让你安全的和RESFUL服务端进行数据交互. 安装 ngResource模块是一个可选的angularjs模块,如果需要使用,我们要单独引用js <script type="text/javascript" src="/javascripts/angular-resource.js"> $resource应用 我们并不是直接通过$resource服务本身同服务器通信,$resource是一个

  • AngularJS中directive指令使用之事件绑定与指令交互用法示例

    本文实例讲述了AngularJS中directive指令使用之事件绑定与指令交互用法.分享给大家供大家参考,具体如下: AngularJS中模板的使用,事件绑定以及指令与指令之间的交互 <!doctype html> <html ng-app="myapp"> <head> <meta charset="utf-8"/> </head> <body ng-controller="Shield

  • AngularJS实现与Java Web服务器交互操作示例【附demo源码下载】

    本文实例讲述了AngularJS实现与Java Web服务器交互操作的方法.分享给大家供大家参考,具体如下: AngularJS是Google工程师研发的产品,它的强大之处不是几句话就能描述的,只有真正使用过的人才能体会到,笔者准备在这篇文章中,以一个简单的登录校验的例子说明如何使用AngularJs和Web服务器进行交互. 准备工作 1.下载angular js库. 官网下载地址:https://angularjs.org/ 或者点击此处本站下载. 2.开发环境准备,由于是和Tomcat服务器

  • AngularJS 指令的交互详解及实例代码

    背景介绍 这例子是视频中的例子,有一个动感超人,有三种能力,力量strength,速度speed,发光light. 这三种能力作为三种属性,定义动感超人作为一个标签,只要添加对应的属性就能拥有该能力. 为了便于结果的展示,为标签添加鼠标的响应事件,当鼠标移动到对应的标签上就会触发一个方法,打印出具备的能力. 程序分析 html部分的代码如下: <div> <superman>nothing!</superman> <superman strength >st

随机推荐