AngularJS中scope的绑定策略实例分析

本文实例讲述了AngularJS中scope的绑定策略。分享给大家供大家参考,具体如下:

当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了:

具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域。

现在,我们来看看绑定策略的三种形式: @、= 、&。

1. @

本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定。指令内部作用域可以使用外部作用域的变量:

@ (or @attr)

把当前的属性作为字符串传递。你还可以绑定来自外层的scope的值,在属性值中插入{{ }}即可。什么意思呢?说的简单一点就是假设你在模板中有个双花括号表达式,然后我们把表达式里的内容和html中指令里特定名字的属性绑定起来:

<div ng-controller="nameController">
  <direct for-name="{{ Name }}"></direct>
<div>
directive("direct",function(){
    return{
      restrict: 'A',
      template: '<div>指令中:{{ name }}</div>',
      scope:{
       name:'@forName'
      }
     }
 })
.controller("nameController",function($scope){
   $scope.Name="张三";
});

2. =

与父scope中的属性进行双向绑定

@是针对字符串(准确来说是表达式expression)而用,但=是针对某个对象的引用;

<div ng-controller="nameController">
  <direct case="data[0]"></direct>
  <direct case="data[1]"></direct>
<div>
directive("direct",function(){
    return{
      restrict: 'ECMA',
      template: '<div>指令中:{{ case.name }}</div>',
      scope:{
       case:'='
      }
     }
 })
.controller("nameController",function($scope){
   $scope.data=[{name:"张三"},{name:"李四"}];
});

data是一个对象数组,里面包含了两个对象,所以,我们分别把两个对象传递给了case这个属性,case属性就把这个对象的引用传递给了模板中我们写的{{ case.name }}中的case;而如果你在=后边加上了自己定义的名字,那只要把html里case属性换成那个名字就可以了。

3. &

传递来自父scope中的函数、稍后调用

它的含义是:对父级作用域进行绑定,并将其中的属性包装成一个函数,注意任何类型的属性都会被包装成一个函数,比如一个单纯的字符串,或是一个对象数组,或是一个函数方法。

更多关于AngularJS相关内容感兴趣的读者可查看本站专题:《AngularJS指令操作技巧总结》、《AngularJS入门与进阶教程》及《AngularJS MVC架构总结》

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

时间: 2017-10-27

详解angularjs中的隔离作用域理解以及绑定策略

我们首先看下面的例子: <!doctype html> <html ng-app="MyModule"> <head> <meta charset="utf-8"> <link rel="stylesheet" href="css/bootstrap-3.0.0/css/bootstrap.css" rel="external nofollow" rel

AngularJs Scope详解及示例代码

一.什么是Scope? scope(http://code.angularjs.org/1.0.2/docs/api/ng.$rootScope.Scope)是一个指向应用model的object.它也是expression(http://www.cnblogs.com/lcllao/archive/2012/09/16/2687162.html)的执行上下文.scope被放置于一个类似应用的DOM结构的层次结构中.scope可以监测(watch,$watch)expression和传播事件.

Angularjs中三种数据的绑定策略(“@”,“=”,“&”)

前言 我们想要实现这样的效果:当我们点击标题的时候展示下面的内容,再点击则收回去. 一.首先回顾一下有哪些绑定策略? 看这个实在是有点抽象了,我们来看具体的实例分析吧! 二.简单的Demo实例 @绑定:传递一个字符串作为属性的值. 比如 str : '@string' 控制器中代码部分示例: myDirec.controller('MyCtrl3',['$scope',function($scope){ $scope.ctrlFlavor="鸡尾酒"; $scope.sayHello=

AngularJS指令中的绑定策略实例分析

本文实例讲述了AngularJS指令中的绑定策略.分享给大家供大家参考,具体如下: 在前面的文章中,我们知道了指令如何生成独立的scope,这一节中我们来仔细研究一下scope中的绑定策略. 总体来说scope的绑定策略分为3种: (1)@ : 绑定字符串 (2)=: 与父控制器进行双向绑定 (3)&:用于调用父scope中的函数 1.基础方式 <test word="{{wordCtrl}}"></test> app.controller('myCon

深入解析AngularJS框架中$scope的作用与生命周期

$scope 的使用贯穿整个 Angular App 应用,它与数据模型相关联,同时也是表达式执行的上下文.有了 $scope 就在视图和控制器之间建立了一个通道,基于作用域视图在修改数据时会立刻更新 $scope,同样的 $scope 发生改变时也会立刻重新渲染视图. 有了 $scope 这样一个桥梁,应用的业务代码可以都在 controller 中,而数据都存放在controller 的 $scope 中. $scope是一个把view(一个DOM元素)连结到controller上的对象.在

angularjs指令之绑定策略(@、=、&)

引入主题背景:angular 的指令配置中的template可以直接使用硬编码写相应的代码,不过也可以根据变量,进行动态更新.那么需要用到那些变量,因用法的不同,所以需要设置合适的绑定策略. 1:先说指令域scope的@ 我觉得描述很费劲,直接用代码来阐述: AngularJS.html <!doctype html> <html ng-app='myApp'> <head> </head> <body> <div ng-controlle

AngularJS中监视Scope变量以及外部调用Scope方法

在AngularJS中,有时候需要监视Scope中的某个变量,因为变量的改变会影响一些界面元素的显示.有时,也希望通过jQuery调用Scope的某个方法. 比如以下场景: <div> <button id="jQBtn">jQ Button</button> </div> <div id="ngSection" ng-controller="NGCtrl"> <input typ

详解angularJs指令的3种绑定策略

今天,我来谈谈angularJs指令的3种绑定策略. 公司最近大量使用angularJs做单页面应用,就免不了使用angularJs的一些组件,而有的组件网上有现成的,不必操心,而有的就得自食其力,先前对指令这一块的封装一直理解的不够,故每次使用directive时抽象性都做得不好,往往移植性很差,而要将抽象做好,就不得不使用指令中的隔离作用域,而光有隔离作用域又不能做好前后文的通信问题,要解决通信的问题,就要使用指令中的绑定,正好最近要用,顺便就整理了一些关于指令中的3种绑定策略,并谈了一些自

浅谈AngularJs指令之scope属性详解

AngularJS使用directive()方法类定义一个指令: .directive("name",function(){ return{ }; }) 上面是定义一个指令的主体框架,该方法接受两个参数: 1.第一个参数:name表示定义的指令的名称(angularjs会用这个name注册这个指令) 2.第二个参数:函数,该番薯必须返回一个对象或者一个函数,但通常我们会返回一个对象.return后接的就是返回的对象. 在返回的对象中有一个scope属性,这个属性用来修饰指令的作用域.

angularJS 中$scope方法使用指南

复制代码 代码如下: <!doctype html> <html> <head> <meta charset="utf-8"> <title>无标题文档</title> </head> <script src="http://localhost:81/js/jquery.js"> </script> <script src="http://lo

angularJS 中$attrs方法使用指南

这里给大家分享的是一个angularJS 中$attrs方法的使用示例: 复制代码 代码如下: <!doctype html> <html>     <head>         <meta charset="utf-8">         <title>             无标题文档         </title>         <script src="http://localhost

AngularJS全局scope与Isolate scope通信用法示例

本文实例讲述了AngularJS全局scope与Isolate scope通信用法.分享给大家供大家参考,具体如下: 在项目开发时,全局scope 和 directive本地scope使用范围不够清晰,全局scope与directive本地scope通信掌握的不够透彻,这里对全局scope 和 directive本地scope的使用做一个总结. 一.scope作用域 1.AngularJS中,子作用域一般都会通过JavaScript原型继承机制继承其父作用域的属性和方法.但有一个例外:在dire

AngularJS中run方法的巧妙运用

前言 AngularJS是google在维护,其在国外已经十分火热,可是国内的使用情况却有不小的差距,参考文献/网络文章也很匮乏.网上关于AngularJS中run方法的介绍也比较少,本文就主要总结了关于AngularJS中run方法的巧妙运用,感兴趣的朋友们可以一起来学习学习. 一.浏览器判断 在angular做微信应用的时候,有时候我们也想把相同一份代码运行在非微信的浏览器上,这时候我们可以在angular的run上写点东西实现~ 例如asw.run函数里执行定义一个$rootScope.i

AngularJS封装指令方法详解

本文实例讲述了AngularJS封装指令方法.分享给大家供大家参考,具体如下: 引言:angularjs是一个中等重量级的前端开发框架 HTML是一门很好的为静态文本设计的语言,但要构建动态的web应用它就显的乏力了.通常,我们使用以下技术来解决静态网页技术在构建动态应用上的不足: 1.类库:类库是一类函数的集合,它能帮助你写web应用.这里起主导作用是你的代码,由你来决定何时使用类库.典型的类库,例如prototype.jQuery等. 2.框架:框架式一种特殊的.已经实现的web应用,你只需

深入探究AngularJs之$scope对象(作用域)

这两天学习了AngularJs之$scope对象这个地方知识点挺多的,而且很重要,所以,今天添加一点小笔记. 一.作用域 AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染. 每个$scope都是Scope类的实例,Scope类有很多方法,用于控制作用域的生命周期.提供事件传播功能,以及支持模板的渲染等. AngularJs的每个应用程序都有一个$rootScope,它是其他所有作用域的父作用域,它的作用范围从包含ng-app指令的H

AngularJS 2.0入门权威指南

学习 Angular 2 当越来越多的 web app 使用 Angular 1构建的时候,更快更强大的 Angular 2 将会很快成为新的标准. Angular的新约定使得它更容易去学习.更快的去开发 app.通过本教程学习更快速.更强大的 Angular 版本. Angular 一个跨移动和桌面的框架 快速开始 本指南指导你如何构建一个简单 Angular app. 可以使用typescript/ JavaScript / Dart任意一种语言来编写Angular app,本教程采用Jav

angularJS中$apply()方法详解

对于一个在前端属于纯新手的我来说,Javascript都还是一知半解,要想直接上手angular JS,遇到的阻力还真是不少.不过我相信,只要下功夫,即使是反人类的设计也不是什么大的问题. Okay,废话不多说.为了弄明白angular JS为何物,我先是从Scope开始.那么什么是Scope呢?借用官方文档的一段话: 复制代码 代码如下: "scope is an object that refers to the application model. It is an execution c