AngularJS控制器(Controller)

AngularJS应用主要依赖于控制器来控制数据在应用程序中的流动。控制器采用ng-controller指令定义。控制器是一个包含属性/属性和JavaScript对象的功能。每个控制器接受$scope参数指定应用程序/模块，由控制器控制。

下面我们通过例子来分析：

<!DOCTYPE html>
<html lang="en">
<head>  <meta charset="UTF-8">  <title>AngularJS入门学习</title> </head>
<body>
<div ng-app="myApp"   ng-controller="myCtrl"><!-- 在该控制器内保存着如下两个Model里的数据ng-model 指令用于双向绑定输入域到控制器的属性 --> 请输入姓氏: <input type="text" ng-model="student.firstName"><br><br>请输入名字: <input type="text" ng-model="student.lastName"><br><br>你的名字是: {{student.fullName()}}
</div>
<script type="text/javascript"  src="js/angular.min.js"></script>
<script>//AngularJS 应用程序：在 <div> 内由 ng-app 定义运行。var app = angular.module('myApp', []);//控制器app.controller('myCtrl', function($scope) {//$scope 是一个应用对象，用于调用控制器，并保存Model(模型)的对象$scope.student = {firstName: "席",//给控制器里的model赋值lastName: "小米",fullName: function() {var studentObject;studentObject = $scope.student;return studentObject.firstName + studentObject.lastName;}};});
</script>
</body>
</html>

1.控制器定义：

已经声明采用ng-controller指令的控制器myCtrl(myCtrl定义 $scope 作为JavaScript对象参数)

其中应用程序是指由ng-app指令定义的对象。

//AngularJS 应用程序：在 <div> 内由 ng-app 定义运行。var app = angular.module('myApp', []);//控制器app.controller('myCtrl', function($scope) {//$scope 是一个应用对象，用于调用控制器，并保存Model(模型)的对象//给控制器里的model赋值$scope.student = {firstName: "席",lastName: "小米",};});

$scope.student 是 myCtrl对象的属性。
firstName和lastName是$scope.student 对象的两个属性。我们已经通过了默认值给他们。

2.控制器方法

fullName: function() {
var studentObject;
studentObject = $scope.student;
return studentObject.firstName + studentObject.lastName;
}

fullName 是$scope.student对象的函数，它的任务是返回合并的名称。
在fullName函数中，我们现在要学生对象返回组合的名字。

AngularJS控制器(Controller)相关推荐

angularjs控制器controller
不要视图去复用Controller,一个控制器一般只负责一小块视图不要在Controller中操作DOM,这不是控制器的职责不要在Controller里面做数据格式化,ng有很好用的表单控件不要 ...
在AngularJS控制器之间共享数据
本文翻译自:Share data between AngularJS controllers I'm trying to share data across controllers. 我正在尝试跨控制 ...
AngularJS控制器中的#39;this#39;与$ scope
本文翻译自:'this' vs $scope in AngularJS controllers In the "Create Components" section of Angu ...
AngularJS 控制器
1. AngularJS 控制器: AngularJS 控制器控制AngularJS 应用程序的数据. ng-controller指令定义了应用程序控制器. AngularJS 控制器是常规的Java ...
AngularJS 控制器中处理DOM事件
# AngularJS 控制器中处理DOM事件标签(空格分隔): AngularJS - AngularJS应用中的DOM事件可以在控制器中完成.AJ框架为我们提供了事件绑定指令,只需要在原生的av ...
ASP.NET MVC 5 入门教程 (2) 控制器Controller
原文:ASP.NET MVC 5 入门教程 (2) 控制器Controller 文章来源: Slark.NET-博客园 http://www.cnblogs.com/slark/p/mvc-5-get ...
AngularJS控制器和过滤器学习（三）
AngularJS控制器 AngularJS 控制器控制 AngularJS 应用程序的数据. AngularJS 控制器是常规的JavaScript对象 <h2>AngularJS 控 ...
kafka专题：kafka的总控制器Controller、消费者重分配策略等核心设计原理详解
文章目录 1. Kafka核心总控制器Controller 1.1 核心总控制器Controller的Leader选举 1.2 Partition副本选举Leader机制 2. 消费者消费偏移量off ...
【SpringMVC 笔记】控制器 Controller 与 RestFul 风格
SpringMVC 笔记控制器 Controller 实现 Controller 接口创建控制器 @Controller 注解创建控制器 @RequestMapping 使用 method 属性指 ...

AngularJS控制器(Controller)

AngularJS控制器(Controller)相关推荐

最新文章

热门文章