<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 中使用。
- [x] AngularJS 应用组成如下:
- 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>
控制器也可以有方法(变量和函数)
外部文件中的控制器
只需要把