AngularJS系列(二)——作用域和控制器

本文链接：https://blog.csdn.net/luo4105/article/details/77894163

作用域(scope)

Scope(作用域) 是应用在 HTML (视图) 和 JavaScript(控制器)之间的纽带。

Scope 是一个对象，有可用的方法和属性。

Scope 可应用在视图和控制器上。

当你在 AngularJS 创建控制器时，你可以将 $scope 对象当作一个参数传递:

当在控制器中添加 $scope 对象时，视图 (HTML) 可以获取了这些属性。

视图中，你不需要添加 $scope 前缀, 只需要添加属性名即可，如： {{carname}}。

代码语言：javascript复制

<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。

代码语言：javascript复制

<div ng-app="myApp"ng-controller="myCtrl">
         名：<inputname="firstname" value="{{firstname}}" /></br>
         姓：<inputname="lastname" value="{{lastname}}" /></br>
         姓名：{{firstname  lastname}}
</div>

代码语言：javascript复制

<script>
         varapp = angular.module("myApp",[]);
         varctrl = app.controller('myCtrl',function($scope){
                   $scope.firstname= "John";
                   $scope.lastname= "Doe";
         })
</script>

controller定义方法，view使用方法

代码语言：javascript复制

<div ng-app="myApp"ng-controller="personCtrl">
名: <input type="text" ng-model="firstName"><br>
姓: <input type="text"ng-model="lastName"><br>
<br>
姓名：{{fullname()}}
</div>

代码语言：javascript复制

<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>

html angularjs

0 人点赞