Angular.js之作用域scope'@','=','&'实例详解

什么是scope

  AngularJS 中,作用域是一个指向应用模型的对象,它是表达式的执行环境。作用域有层次结构,这个层次和相应的 DOM 几乎是一样的。作用域能监控表达式和传递事件。

  在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层。

  除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-repeat 等都会产生一个或者多个作用域。此外,还可以通过 AngularJS 提供的创建作用域的工厂方法来创建一个作用域。这些作用域都拥有自己的继承上下文,并且根作用域都为$rootScope。

  在生成一个作用域之后,在编写 AngularJS 代码时,$scope 对象就代表了这个作用域的数据实体,我们可以在$scope 内定义各种数据类型,之后可以直接在 HTML 中以 {{变量名}} 方式来让 HTML 访问到这个变量。

下面通过实例代码给大家介绍angular.js之作用域scope'@','=','&'

<!doctype html>
<html ng-app='myApp'>
<head>
</head>
<body>
  <script src="http://cdn.bootcss.com/angular.js/1.4.6/angular.js"></script>
  <script src="https://cdn.bootcss.com/jquery/1.8.3/jquery.js"></script>
  <div ng-controller="listCtrl" ng-app="myApp">
    <input type="text" ng-model="color">
    <!-- <span kid hd-color="color"></span> --> <!--@是单项数据绑定,hd-color="{{color}}"作用域隔离,在view中是以模板“{{}}”的形式;=双向绑定,hd-color="color",在view中直接以属性的形式出现-->
    <div kid color="callback()"></div>
  </div>
<script type="text/javascript">
    var myApp=angular.module('myApp',[]);
    myApp.controller('listCtrl',function($scope){
      $scope.color="red";
      $scope.callback=function(){
        return 'a web developer !';
      }
    });
    myApp.directive('kid',function(){
      return {
        restrict:'AE',
        //template:'<div style="color:{{color}}">@符号的学习</div>' ,
        template:'<h1>{{color()}}</h1>',
        scope:{ /*color:"=hdColor"*//* "@hdColor" */color:'&'} //通过&属性名来调用控制器的函数
      }
    });
</script>
</div>
</body>
</html>

以上所述是小编给大家介绍的Angular.js之作用域scope'@','=','&'实例详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对我们网站的支持!

时间: 2017-02-26

AngularJs学习第五篇从Controller控制器谈谈$scope作用域

Controller的创建 AngularJs controller使用无处不在,在里代码演示比较简单的创建工作. <!DOCTYPE html> <html xmlns="http://www.w.org//xhtml" ng-app="exampleApp"> <head> <meta http-equiv="Content-Type" content="text/html; charset

Angular.Js之Scope作用域的学习教程

scope是什么? 大家都知道在AngularJS 中作用域是一个指向应用模型的对象,它是表达式的执行环境.作用域有层次结构,这个层次和相应的 DOM 几乎是一样的.作用域能监控表达式和传递事件. 在 HTML 代码中,一旦一个 ng-app 指令被定义,那么一个作用域就产生了,由 ng-app 所生成的作用域比较特殊,它是一个根作用域($rootScope),它是其他所有$Scope 的最顶层. 除了用 ng-app 指令可以产生一个作用域之外,其他的指令如 ng-controller,ng-

AngularJS入门教程之Scope(作用域)

AngularJS Scope(作用域) Scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带. Scope 是一个对象,有可用的方法和属性. Scope 可应用在视图和控制器上. 如何使用 Scope 当你在 AngularJS 创建控制器时,你可以将 $scope 对象当作一个参数传递: AngularJS 实例 控制器中的属性对应了视图上的属性: <!DOCTYPE html> <html> <head> <me

关于angularJs指令的Scope(作用域)介绍

每当一个指令被创建的时候,都会有这样一个选择,是继承自己的父作用域(一般是外部的Controller提供的作用域或者根作用域($rootScope)),还是创建一个新的自己的作用域,当然AngularJS为我们指令的scope参数提供了三种选择,分别是:false,true,{}:默认情况下是false. 1.scope = false JS 代码: html 代码: result: 修改文本框的内容,两个名字都会变,实际上修改的是同一个$scope的name属性. 2. scope=true

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

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

深入探究AngularJS框架中Scope对象的超级教程

一.遇到的问题 问题发生在使用 AngularJS 嵌套 Controller 的时候.因为每个 Controller 都有它对应的 Scope(相当于作用域.控制范围),所以 Controller 的嵌套,也就意味着 Scope 的嵌套.这个时候如果两个 Scope 内都有同名的 Model 会发生什么呢?从子 Scope 怎样更新父 Scope 里的 Model 呢? 这个问题很典型,比方说当前页面是一个产品列表,那么就需要定义一个 ProductListController functio

详解JavaScript的AngularJS框架中的作用域与数据绑定

AngularJS 简介 AngularJS 是由 Google 发起的一款开源的前端 MVC 脚本框架,既适合做普通 WEB 应用也可以做 SPA(单页面应用,所有的用户操作都在一个页面中完成).与同为 MVC 框架的 Dojo 的定位不同,AngularJS 在功能上更加轻量,而相比于 jQuery,AngularJS 又帮您省去了许多机械的绑定工作.在一些对开发速度要求高,功能模块不需要太丰富的非企业级 WEB 应用上,AngularJS 是一个非常好的选择.AngularJS 最为复杂同

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

本文实例讲述了AngularJS中scope的绑定策略.分享给大家供大家参考,具体如下: 当scope选项写为scope:{ }这种形式的时候,就已经为指令生成了隔离作用域,指令的模板就无法访问外部作用域了: 具有隔离作用域的指令最主要的使用场景是创建可复用的组件,组件可以在未知上下文中使用,并且可以避免污染所处的外部作用域或不经意地污染内部作用域. 现在,我们来看看绑定策略的三种形式: @.= .&. 1. @ 本地作用域属性:使用@符号将本地作用域同DOM属性的值进行绑定.指令内部作用域可以

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

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

详解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 module返回对象的坑(推荐)

通过将module中不同的部件拆分到不同的js文件中,在组装的时候发现module存在一个奇怪的问题,不知道是不是AngularJS的bug.至今没有找到解释. 问题是这样的,按照理解,angular.module('app.main', []);这样一句话相当于从app.main命名空间返回出一个app对象.那么,不论在任何js文件中,我通过该方法获得的app变量所储存的指针都应该指向唯一的一个堆内存,而这个内存中存储的就是这个app对象.这种操作在module的js文件,和controlle

AngularJS equal比较对象实例详解

使用情况 1 首先,所有满足 a === 3 这种的对象,在angular.equals(a,b)中都会返回真 2 所有对象的类型,以及属性值都相同的,也会返回真 3 NaN和NaN也会返回真(在javascript中,返回的是假) 4 正则也会返回真(在javascirpt,/abc/ /abc/被认为是不相等的) 样例 <html> <head> <meta http-equiv="Content-Type" content="text/ht

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中$scope数据序列化的实例

如下所示: <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="angular.min.js"></script> <script src="jquery.min.js"></script> </head> <bod