Angular系列之作用域$scope（四）

其实在前几篇的文章当中有提到过$scope，但并没有去详细的解释$scope是做什么的等一些特性；而且$scope在angular中是最为重要的知识点之一，所以要单独抽离出来。

如果了解过开发模式MVC模式的话，如果没有了解过可以先看一下《Angular系列之了解（一）》中对MVVM模式的解释：

MVC中的M对应什么？V对应什么？C对应什么呢？

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

$scope 便是对应着M模型，特性：

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

2)$scope(作用域) 是应用在 HTML (视图) 和 JavaScript (控制器)之间的纽带;

3)$scope 是一个对象，有可用的方法和属性;

4)Scope 可应用在视图和控制器上;

就看一下$scope的应用demo吧：

<body>

<div ng-app="newApp" ng-controller="newCtrl">
    <p> {{username}}</p>
    <button ng-click="sayName()">我的名字</button>

    <!--(使用 ng-init 不是很常见。在控制器一章中有一个更好的初始化数据的方式。)-->
    <ul>
        <li ng-repeat="x in citys">
            {{x}}
        </li>
    </ul>
</div>

</body>
</html>
<script src="https://cdn.bootcss.com/angular.js/1.6.3/angular.min.js"></script>
<script type="text/javascript">

    let newApp = angular.module("newApp", []);
    newApp.controller("newCtrl", function ($scope) {
        $scope.username = "liuqiang"; //定义username变量，且赋值
        $scope.sayName = function () { //定义sayName()方法，为button单机事件click所引用
            alert("我的名字是：" + this.username)
        };
        $scope.citys = ["九江","南昌","景德镇","赣州"]; //定义citys数组变量
    })
</script>

运行结果：

知识点提示：[ 根作用域$rootScope：

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

newApp.controller("newCtrl", function ($scope,$rootScope) {
})

]，后面会有一篇对$rootScope有详细的讲解的。

Angular系列之作用域$scope（四）

猜你喜欢