AngularJS控制器

控制器(controllers)可以控制应用程序数据

控制器是普通的js对象

使用ng-controller指令定义一个控制器

<div ng-app="myApp" ng-controller="myCtrl">
    First name: <input ng-model="firstname">
    Last name: <input ng-model="lastname">
    <br>
    Full name: {{fullname}}
</div>

<script>
    var app = angular.module('myApp',[]);
    app.controller('<span style="font-family: Arial,Helvetica,sans-serif;">myCtrl</span>',function ($scope) {
        $scope.firstname = "John";
        $scope.lastname = "Doe";
        $scope.fullname = $scope.firstname + $scope.lastname;
    })
</script>

上述例子解释:

ng-app定义一个应用程序myApp

ng-controller定义一个控制器myCtrl

myCtrl本质上是一个js函数

AngularJS利用$scope对象调用myCtrl这个函数

$scope是整个应用程序所有变量与函数的'拥有者'

控制器在scope对象中创建了三个属性,firstname,lastname,fullname

ng-model将input绑定到控制器三个属性变量

控制器方法

控制器对象不仅可以创建属性,还可以创建函数,如:

<div ng-app="myApp" ng-controller="ctrl">
    First name: <input ng-model="firstname">
    Last name: <input ng-model="lastname">
    <br>
    Full name: {{fullname()}}
</div>

<script>
    var app = angular.module('myApp',[]);
    app.controller('ctrl',function ($scope) {
        $scope.firstname = "John";
        $scope.lastname = "Doe";
        $scope.fullname = function() {
            return $scope.firstname + $scope.lastname;
        }
    })
</script>

相关文章

ANGULAR.JS:NG-SELECTANDNG-OPTIONSPS:其实看英文文档比看中...
AngularJS中使用Chart.js制折线图与饼图实例  Chart.js 是...
IE浏览器兼容性后续前言 继续尝试解决IE浏览器兼容性问题,...
Angular实现下拉菜单多选写这篇文章时,引用文章地址如下:h...
在AngularJS应用中集成科大讯飞语音输入功能前言 根据项目...
Angular数据更新不及时问题探讨前言 在修复控制角标正确变...