AngularJS系列(二)——作用域和控制器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/luo4105/article/details/77894163
作用域(scope)
Scope(作用域) 是应用在 HTML (视图) 和 JavaScript(控制器)之间的纽带。
Scope 是一个对象，有可用的方法和属性。
Scope 可应用在视图和控制器上。
当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:
当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。
视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。
<div ng-app="myApp"ng-controller="myCtrl">
<inputng-model="name">
<h1>{{greeting}}</h1>
<buttonng-click='sayHello()'>点我</button>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "张三";
$scope.sayHello=function(){
$scope.greeting= "hello " + $scope.name;
}
});
</script>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>控制器(controller)
AngularJS应用程序被控制器控制。
ng-controller定义控制器。
控制器是标准的js对象，由标准的js对象的构造函数创建。
controller的@scope用来保存Angular Model
controller定义model，view使用model。
<div ng-app="myApp"ng-controller="myCtrl">
名：<inputname="firstname" value="{{firstname}}" /></br>
姓：<inputname="lastname" value="{{lastname}}" /></br>
姓名：{{firstname+ lastname}}
</div><script>
varapp = angular.module("myApp",[]);
varctrl = app.controller('myCtrl',function($scope){
$scope.firstname= "John";
$scope.lastname= "Doe";
})
</script>controller定义方法，view使用方法
<div ng-app="myApp"ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text"ng-model="lastName"><br>
<br>
姓名：{{fullname()}}
</div><script>
var app = angular.module('myApp', []);
app.controller('personCtrl',function($scope) {
$scope.firstName = "John";
$scope.lastName = "Doe";
$scope.fullname= function(){
return$scope.firstName + " " + $scope.lastName;
}
});
</script>本文参与 腾讯云自媒体分享计划，分享自作者个人站点/博客。
原始发表：2017-09-08 ，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录