作用域

最新推荐文章于 2024-05-07 10:45:00 发布

987860960

最新推荐文章于 2024-05-07 10:45:00 发布

阅读量295

点赞数

分类专栏： angularJs 文章标签：作用域

本文为博主原创文章，未经博主允许不得转载。

本文链接：https://blog.csdn.net/qq_33772545/article/details/71585921

版权

angularJs 专栏收录该内容

8 篇文章 0 订阅

订阅专栏

作用域

[x] 完美的架构是将业务逻辑都放在控制器中，而将相关的数据都放在控制器的作用域中。

作用域的基本功能

提供观察者以监视数据模型的变化
将变化通知给整个应用，甚至系统外的组件
可以进行嵌套，隔离业务功能和数据
给表达式提供运算时所需执行的环境

[x] ng-controller指令是作用域创建指令

作用域层级

var HelloCtrl = function(){
    $scope.name = 'world';
}

HelloCtrl看起来像一般的JavaScript构造函数，只有$scope参数令人疑惑，它是从何而来的呢？

[x] 答案是 ng-controller指令会调用scope对象的 $new()方法创建新的作用域$ scope.
[x] 看上去需要至少一个作用域实例才能创建新的作用域。
[x] AngularJS拥有$rootScope,它是其它所有作用域的父作用域。

<body ng-app="usersApp">
        <div ng-controller="MyController">
            <h1>hello {{name}}!</h1>
        </div>
        <script>
        var app=angular.module('usersApp',[])
        app.controller('MyController',function($scope){
            $scope.name="Lrn"
        })

        </script>
    </body>

[x] ng-controller指令为这个DOM元素创建了一个新的 $scope对象，并将其嵌套在$ rootscope中。

在DOM树中，会有很多指令创建出很多作用域，一些指令会创建子作用域，我们会奇怪为什什么要搞得那么复杂。为了说明原因，我们来看使用ng-repeat重复器（repeater）指令的例子。

作用域のng-repeat

<script>
            var app = angular.module("myApp",[]);
            app.controller("WorldCtrl",function($scope){
                $scope.populations = 7000;
                $scope.countries =[{name:'France',population:63.1},{name:'UK',population:64.3}] 
            })
        </script>
    </head>
    <body>
        <ul ng-controller="WorldCtrl">
            <li ng-repeat="country in countries">
                {{country.name}} has population of {{country.population}}
            </li>
            <hr>
            World's population:{{population}} millions.
        </ul>
    </body>

[x] ng-repeat指令为国家集合中每个国家创建新的DOM元素。
[x] 对应每项创建新变量country，并暴露给$scope以在视图中渲染。

987860960

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
作用域

作用域[x] 完美的架构是将业务逻辑都放在控制器中，而将相关的数据都放在控制器的作用域中。作用域的基本功能提供观察者以监视数据模型的变化将变化通知给整个应用，甚至系统外的组件可以进行嵌套，隔离业务功能和数据给表达式提供运算时所需执行的环境 [x] ng-controller指令是作用域创建指令作用域层级var HelloCtrl = function(){
复制链接

扫一扫

专栏目录