angular-$scope和$rootScope

<body ng-app="myApp">
		<div ng-controller="myCtrl">
			<input type="text" ng-model="name"/>
			<p>{{name}}</p>
		</div>
		<div ng-app="myApp" ng-controller="myCtrl1">
			<input type="text" ng-model="name"/>
			<p>{{name}}</p>
		</div>
		<div ng-app="myApp" ng-controller="myCtrl2">
			<ul>
				<!--下面两行语句等价-->
				<!--<li ng-repeat="x in name">{{x.name+" "+lastname}}</li>-->
				<li ng-repeat="x in name">{{x.name}} {{lastname}}</li>
			</ul>
		</div>
		<script type="text/javascript">
			var app=angular.module('myApp',[]);
			app.controller("myCtrl",function($scope){
				$scope.name="youyuanyuan"
			})
			app.controller("myCtrl1",function($scope){
				$scope.name="zhengshaonong"
			})
			app.controller("myCtrl2",function($scope,$rootScope){
				$scope.name=[{name:"zsn"},{name:"yyy"}]
				$rootScope.lastname="zheng";
			})
		</script>
	</body>

scope 是一个 JavaScript 对象,带有属性和方法,这些属性和方法可以在视图和控制器中使用。

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

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

调用控制器里的函数

<body ng-app="myApp">
		<div ng-controller="myCtrl">
			<input type="text" ng-model="name"/>
			<input type="text" ng-model="age"/>
			<p>调用控制器里的函数:{{info()}}</p>
		</div>
		<script type="text/javascript">
			var app=angular.module('myApp',[]);
			app.controller("myCtrl",function($scope){
				$scope.name="youyuanyuan";
				$scope.age=10;
				$scope.info=function(){
					//注意变量前加上$scope
					return $scope.name+" "+$scope.age;
				}
			})
			
		</script>
	</body>

控制器也可以有方法(变量和函数)

外部文件中的控制器

只需要把

posted @ 2017-04-07 16:34  sakura-sakura  阅读(634)  评论(0编辑  收藏  举报