码迷,mamicode.com
首页 > Web开发 > 详细

AngularJS 控制器

时间:2015-11-22 16:03:12      阅读:174      评论:0      收藏:0      [点我收藏+]

标签:

 AngularJS 控制器控制 AngularJS 应用程序的数据,是常规的 JavaScript 对象

AngularJS控制器

AngularJS 控制器控制 AngularJS 应用程序的数据。

  • ng-controller 指令定义了应用程序控制器。
  • 控制器是 JavaScript 对象,由标准的 JavaScript 对象的构造函数 创建。
  • 控制器的 $scope 是控制器所指向的应用程序/HTML 元素。
技术分享
<div ng-app="" ng-controller="personController">

名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{person.firstName + " " + person.lastName}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe"
    };
}
</script>
View Code

实例讲解:

AngularJS 应用程序由 ng-app 定义。应用程序在 <div> 内运行。

ng-controller 指令把控制器命名为 object ?

函数 personController 是一个标准的 JavaScript 对象的构造函数

控制器对象有一个属性:$scope.person

person 对象有两个属性:firstName 和 lastName

ng-model 指令绑定输入域到控制器的属性(firstName 和 lastName)。

控制器属性

上例中控制器 personController有一个属性person对象

控制器方法

控制器也可以带方法

技术分享
<div ng-app="" ng-controller="personController">

名: <input type="text" ng-model="person.firstName"><br>
姓: <input type="text" ng-model="person.lastName"><br>
<br>
姓名: {{fullName()}}

</div>

<script>
function personController($scope) {
    $scope.person = {
        firstName: "John",
        lastName: "Doe",
     };
     $scope.fullName = function() {
         var x;
         x = $scope.person; 
         return x.firstName + " " + x.lastName;
     };
}
</script>
View Code

 

  

AngularJS 控制器

标签:

原文地址:http://www.cnblogs.com/qingwen/p/4985787.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!