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程序设计有所帮助。

时间: 2016-12-11

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

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

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实现与服务器交互分享

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

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

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

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

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

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 指令的交互详解及实例代码

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

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

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

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

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

详解Vue基于 Nuxt.js 实现服务端渲染(SSR)

直接使用 Vue 构建前端单页面应用,页面源码时只有简单的几行 html,这并不利于网站的 SEO,这时候就需要服务端渲染 2016 年 10 月 25 日,zeit.co 背后的团队对外发布了一个 React 的服务端渲染应用框架 Next.js 几小时后,一个基于 Vue.js 的服务端渲染应用框架应运而生,与 Next.js 异曲同工,这就是Nuxt.js 一.快速模板 在已经安装了 vue-cli 的前提下,可以快速创建一个 nuxt 的项目模板 vue init nuxt-commun

详解基于 Nuxt 的 Vue.js 服务端渲染实践

Vue.js 是目前最火热的前端框架之一,而 Nuxt.js 是针对 Vue.js 推出的服务端渲染框架,通过高度定制化的配置以及简洁的 API,开发者可以快速进行服务端渲染项目的开发,本文将对 Nuxt.js 框架做一个简要介绍. 服务端渲染 服务端渲染(Server Side Render)并不是一个新的概念,在单页应用(SPA)还没有流行起来的时候,页面就是通过服务端渲染好,并传递给浏览器的.当用户需要访问新的页面时,需要再次请求服务器,返回新的页面. 为了优化体验,开发者们开始选择采用

详解使用vscode+es6写nodejs服务端调试配置

前端的小伙伴们在babel等的加持下,已经可以愉快的使用es6来写代码了. 然后对于服务端的nodejs就有点坑爹了,虽然原生支持了es6,但是只是部分支持,一些不支持的特性(比如module)使用了就会报错,所以如果想使用完整的es6来写服务端nodejs,我们还是离不开babel. 下面介绍一下在vscode中使用es6写nodejs的配置方法. 1.首先在根目录下建立.babelrc文件,写入babel配置,我的配置如下,记得npm安装babel及你需要的presets或者plugin.

详解angularjs中如何实现控制器和指令之间交互

如果我们具有下面的DOM结构: <div ng-controller="MyCtrl"> <loader>滑动加载</loader> </div> 同时我们的控制器具有如下的签名: var myModule = angular.module("MyModule", []); //首先定义一个模块并在模块下挂载控制器,第二个参数为一个数组,其中函数前面的参数都是会被注入到函数形参上面的 myModule.controll

详解使用Nuxt.js快速搭建服务端渲染(SSR)应用

安装 nuxt.js Nuxt.js 官方提功了两种方法来进行项目的初始化,一种是使用Nuxt.js团队的脚手架工具 create-nuxt-app ,一种是根据自己的需求自由配置 使用脚手架适合新手,对 nodejs 后台框架有所了解:按照自己需求自由配置,需要对如何配置 webpack 以及 nodejs 后台框架有所了解. 两种方式比较下就是原生和插件的区别. 使用脚手架安装 需要有 nodejs 或者yarn环境,推荐使用 vscode 自带的控制台输入命令行命令进行操作 在有了环境之后

详解AngularJS中$filter过滤器使用(自定义过滤器)

1.内置过滤器 * $filter 过滤器,是angularJs中用来处理数据以更好的方式展示给我用户.比如格式化日期,转换大小写等等. * 过滤器即有内置过滤器也支持自定义过滤器.内置过滤器很多,可以百度.关键是如何使用: * 1.在HTML中直接使用内置过滤器 * 2.在js代码中使用内置过滤器 * 3.自定义过滤器 * * (1)常用内置过滤器 * number 数字过滤器,可以设置保留数字小数点后几位等 * date 时间格式化过滤器,可自己设置时间格式 * filter 过滤的数据一般

详解angularjs获取元素以及angular.element()用法

本文介绍了详解angularjs获取元素以及angular.element()用法 ,分享给大家,具体如下: addClass()-为每个匹配的元素添加指定的样式类名 after()-在匹配元素集合中的每个元素后面插入参数所指定的内容,作为其兄弟节点 append()-在每个匹配元素里面的末尾处插入参数内容 attr() - 获取匹配的元素集合中的第一个元素的属性的值 bind() - 为一个元素绑定一个事件处理程序 children() - 获得匹配元素集合中每个元素的子元素,选择器选择性筛选

详解AngularJS中的表单验证(推荐)

AngularJS自带了很多验证,什么必填,最大长度,最小长度...,这里记录几个有用的正则式验证 1.使用angularjs的表单验证 正则式验证 只需要配置一个正则式,很方便的完成验证,理论上所有的验证都可以用正则式完成 //javascript $scope.mobileRegx = "^1(3[0-9]|4[57]|5[0-35-9]|7[01678]|8[0-9])\\d{8}$"; $scope.emailRegx = "^[a-z]([a-z0-9]*[-_]?

详解AngularJS ng-class样式切换

整理文档,搜刮出一个详解AngularJS ng-class样式切换,稍微整理精简一下做下分享. 1.HTML <ion-view> <ion-content> <div class="button-bar"> <div ng-class="{true: 'bgstyle-check', false: 'bgstyle'}[isFirst]" ng-click="isFirst = !isFirst"&g