【AngularJS】Scope作用域

最新推荐文章于 2021-06-18 23:42:29 发布

陶洲川

最新推荐文章于 2021-06-18 23:42:29 发布

阅读量441

点赞数

分类专栏：【基础】文章标签： model scope app controller ng-app

本文链接：https://blog.csdn.net/River_Continent/article/details/72770214

版权

【基础】专栏收录该内容

229 篇文章 1 订阅

订阅专栏

作用域指的是app的操作范围，详细介绍菜鸟教程和W3School都有；下面是一点小思考；

首先比较下Demo1和Demo2有什么不同；

Demo1

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1 ng-model="carname">{{carname}}</h1>
<!-- 这里表示，我的模型的名字就叫carname -->
</div>

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

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

</body>
</html>

Demo2

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://cdn.static.runoob.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>

<div ng-app="myApp" ng-controller="myCtrl">

<h1>{{carname}}</h1>
<!-- 这里表示，我的模型的名字就叫carname -->
</div>

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

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

</body>
</html>

红色部分可以看出，Demo1是标准写法，Demo2是简略写法；因为按照我们之前的教程，应该是Demo那样写；ng-app和ng-controller先划分下势力范围。

然后组件就要在具体的实例标记；AngularJS的好处就是用双大括号来标记model，这样，就不用写ng-model了；

为什么，因为程序员很''懒''；

Demo1和Demo2结果都是一样的；就是比较下不同；让大家了解下；

截图：