AngularJS Scope(作用域)

最新推荐文章于 2020-09-09 15:10:41 发布

小轩雪

最新推荐文章于 2020-09-09 15:10:41 发布

阅读量247

点赞数

分类专栏： AngularJS 文章标签： angularjs

本文链接：https://blog.csdn.net/qq_21119289/article/details/53841309

版权

AngularJS 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

Scope(作用域)是应用在HTML(视图)JavaScript(控制器)之间的纽带。

1.如何使用Scope

当在控制器中添加$scope对象时，视图（HTML）可以获取这些属性。

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
    $scope.carname = "vivo";
});
</script>

<p>控制器中创建一个属性名‘carname’，对应了视图中使用{{}}中的名称</p>

</body>

2.Scope概述

AngularJS 应用组成如下：

View(视图), 即 HTML。
Model(模型), 当前视图中可用的数据。
Controller(控制器), 即 JavaScript 函数，可以添加或修改属

scope是一个JavaScript对象，带有属性和方法，这些属性和方法可以在视图和控制器中使用。

3.Scope作用范围

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
    <li ng-repeat="x in names">{{x}}</li>
</ul>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope){
    $scope.names = ["xiaomi","meizu","oppo"];
});
</script>
</body>

在大型项目中， HTML DOM 中有多个作用域，这时你就需要知道你使用的 scope 对应的作用域是哪一个。

4.根作用域

所有的应用都有一个$rootScope，它可以作用在ng-app指令包含的所有HTML元素中。
$rootScope可以作用于整个应用中，是各个controller中scope的桥梁。用rootScope定义的值可以在所有的controller中使用。

<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 的家族成员</h1>
<ul>
    <li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>

<script>
var app = angular.module("myApp", []);
app.controller("", function(){
    $scope.names = ["Windows", "Ubuntu", "linux"];
    $rootScope.lastname = "System";
});
</script>

<p>$rootScope 在循环对象内外都可以访问</p>

</body>