Angular系列之作用域$scope（四）
阿新 • • 發佈：2019-02-09
其實在前幾篇的文章當中有提到過$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有詳細的講解的。