【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域内对象
    });

效果：对象