angularjs 控制器应用

angularjs 控制器旨在操作view页面数据,所有控制器必须在指定的模型中才能发挥作用,控制器构造方式为:模型名称.controller('控制器名称',function(注入){数据操作})

一个页面可有多个控制器控制不同的元素:

<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<script src="angular.js"></script>
</head>
<body>
<!--方式控制器必须在定义的模型之内即ng-app -->
<div ng-app="mymodule1"><!--模型定义-->
<div ng-controller="mycontroller1">
<p ng-bind="name"></p>
<input type="text" ng-model="gender"/><!--给输入框定义初始值-->
<p >输入框改变:<span ng-bind="gender"></span></p>
</div>

</div>


<script>
// 第一步定义模型angular.module("定义模型名称",[其他注入]);
var mymodule=angular.module("mymodule1",[]);
// 第二步定义控制器 : 模型名称.controller('控制器名称',function(依赖注入变量){操作函数})
mymodule.controller('mycontroller1',function($scope){
$scope.name='bella';
$scope.gender='female';
})


</script>

</body>
</html>
页面效果如下:

 


posted @ 2017-01-12 13:05  司马懿是一朵小花  阅读(143)  评论(0编辑  收藏  举报