AngularJs之$scope对象的示例分析-创新互联

这篇文章主要为大家展示了“AngularJs之$scope对象的示例分析”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“AngularJs之$scope对象的示例分析”这篇文章吧。

目前成都创新互联已为1000+的企业提供了网站建设、域名、网络空间、成都网站托管、企业网站设计、济源网站维护等服务，公司将坚持客户导向、应用为本的策略，正道将秉承"和谐、参与、激情"的文化，与客户和合作伙伴齐心协力一起成长，共同发展。

一、作用域

AngularJs中的$scope对象是模板的域模型,也称为作用域实例.通过为其属性赋值,可以传递数据给模板渲染.

每个$scope都是Scope类的实例,Scope类有很多方法,用于控制作用域的生命周期、提供事件传播功能,以及支持模板的渲染等.

AngularJs的每个应用程序都有一个$rootScope,它是其他所有作用域的父作用域,它的作用范围从包含ng-app指令的HTML元素开始.它是在新应用启动时自动创建.

二、指令创建作用域

ng-controller指令是作用域创建指令,当在DOM树中遇到作用域创建指令时,AngularJs都会创建Scope类的新实例$scope.新创建的作用域实例$scope会拥有$parent属性,并指向它的父作用域.在DOM树中,会有很多这样的指令创建出很多作用域.

(众多作用域形成了以$rootScope为根的树结构,鉴于DOM树驱动了作用域的创建,作用域树模仿了DOM树的结构)

ng-repeat指令的运用:

  

    

    

  

  

    

    

      {{country.name}} 有 {{country.population}} 人口

    

    


    世界人口数：{{population}}

    

 

  

  

  

  

myapp.js

var app = angular.module("myApp",[]);

app.controller('WorldCtrl',function($scope){

  $scope.population = 7000;

  $scope.countries = [

    {name: 'France',population:63.1},

    {name: 'UK',population: 61.8},

  ];
});

测试结果：

ng-repeat指令用来遍历属性值,上面对应每个country,都有个新变量要暴露给$scope,而又没有覆盖之前变量的值;AngularJs中给集合中的每个元素都创建了新的作用域,所以在不同作用域中,定义同名变量,不会造成命名的冲突(不同的DOM元素指向不同的作用域,并使用各自作用域中的变量渲染模板).这相当于集合中每个项目都有自己的命名空间.

三、作用域层级和继承

作用域中定义的属性对于所有子作用域是可见的，只要子作用域中没有定义同名的属性.

实例：

  

    

    

  

  

    
Hello,{{name}}

    

     Say hello to:

     
Hello,{{name}}!!

    

var app = angular.module("myApp",[])

app.controller("HelloCtrl", function($scope) {

// $scope.name = "youyi";

});

  

    

    

  

  

    
Hello,{{thing.name}}

    

     Say hello to:

     
Hello,{{thing.name}}!!