AngularJS笔记---作用域和控制器
什么叫作用域. 什么叫控制板, 作用域包括了3D渲染主视图时需要的作用和统计数据,这是全部主视图的惟一根源。能够将作用域了解成视图实体模型(ViewModel). 作用域中间能够是包括关联还可以是单独关联.能够根据设定不一样的ng-Controller来让$scope处在不一样的作用域下边。
一.$rootScope
1.1 rootScope能够了解成全局变量,如果赋值对全部module都合理. rootScpoe不取决于一切1个controller, app.run是module被载入那时候实行的编码. 能够了解成Silverlight MVVM里边的oninit方式.
<html>
<script src="angular.min.js">" data-word='script' class="" >script>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.run(function($rootScope){
$rootScope.message="hello frank!";
});
" data-word='script' class="" >script>
<head>
<div ng-app="myapp">
<h1>{{ message }}" data-word='h1' class="" >h1>
" data-word='div' class="" >div>
" data-word='head' class="" >head>
<body>
" data-word='body' class="" >body>
" data-word='html' class="use" >html>
1.2 AngularJS会优先选择获得Controller中$scope加上的值.
编码给出: 分別有3个{message}. testControl2中在$scope中再次授予了message值.
<html>
<script src="angular.min.js">" data-word='script' class="" >script>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.run(function($rootScope){
$rootScope.message="hello frank!";
});
app.controller('testControl1',function(){
});
app.controller('testControl2',function($scope){
$scope.message = "hello loch!";
});
" data-word='script' class="" >script>
<head>
<div ng-app="myapp">
{{ message }}
<div ng-controller="testControl1">
{{ message }}
" data-word='div' class="" >div>
<div ng-controller="testControl2">
{{ message }}
" data-word='div' class="" >div>
" data-word='div' class="" >div>
" data-word='head' class="" >head>
<body>
" data-word='body' class="" >body>
" data-word='html' class="use" >html>
运作結果: testControl2下的message被改动了.
hello frank!
hello frank!
hello loch!
二. 控制板(ng-Controller)
ng-Controller气氛二种状况这种是包括,另这种是单独. 人们姑且称为 父子关系和弟兄关联吧.
2.1 父子关系
2.1.1 编码给出:ChildController 包括在了ParentController里边, 2个button都对Count字段名开展赋值。
<html>
<script src="angular.min.js">" data-word='script' class="" >script>
<script type="text/javascript">
var app = angular.module('myapp',[]);
app.controller('ParentController',function($scope){
$scope.Count = 1;
$scope.addParent = function(){
$scope.Count+=1;
}
});
app.controller('ChildController',function($scope){
相关文章
- 2条评论
- 蓝殇铃予2022-06-01 19:51:20
- tion($scope){ $scope.Count = 1; $scope.addParent = function(){
- 冬马芩酌2022-06-01 14:28:27
- ; hello frank! hello frank! hello loch! &nbs