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

冷不防 2022-06-07 23:39 256阅读 0赞

## 作用域(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>

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>