【MVVM】- AngularJS $scope 用法

時間 2019-11-18

標籤 MVVM angularjs scope 用法欄目 AngularJS 简体版

原文原文鏈接

Scope(做用域) 是應用在 HTML (視圖) 和 JavaScript (控制器)之間紐帶。app

AngularJS 應用組成：函數

View(視圖), 即 HTML。
Model(模型), 當前視圖中可用的數據--->scope對象
Controller(控制器), 即 JavaScript 函數，能夠添加或修改屬性

外觀頁面spa

<body ng-app="myApp">

<p>myCtrl01的工做域</p>
<div  ng-controller="myCtrl01">
$scope對象carname：<span>{{carname}}</span><br>
$rootscope對象：<span>{{global}}</span>
</div>

<hr>

<p>myCtrl02的工做域</p>
<div  ng-controller="myCtrl02">
$scope對象carname：<span>{{carname}}</span><br>
$rootscope對象：<span>{{global}}</span>
</div>

js操做邏輯code

var app = angular.module('myApp', []);

/* 在 AngularJS 建立控制器時，可將 $scope 對象看成一個參數傳遞
 * 當在控制器中添加 $scope 對象時，視圖 (HTML) 可獲取這些屬性。
 * 視圖中，無需添加 $scope 前綴, 只須要添加屬性名便可，如： {{carname}}
 * 
 * 全部的應用都有一個 $rootScope，可做用在 ng-app 指令包含的全部 HTML 元素中，
 * $rootScope 可做用於整個應用中各個 controller。
 */
  
app.controller('myCtrl01', function($scope,$rootScope) {
    $scope.carname = "Hello";    //定義和controller關聯的scope域內對象
    $rootScope.global="global";  //定義rootscope範圍內的變量
});
 
app.controller('myCtrl02', function($scope,$rootScope) {
        $scope.carname = "AngularJS";    //定義和controller關聯的scope域內對象
    });

效果：對象