AngularJS 控制器 controller

控制器的作用

• 可以给数据设定初始值。
• 可以进行数据运算。
• 可以绑定视图的数据。

 

---

简单例子

控制器可以包含属性或方法。

<div ng-app="myApp" ng-controller="myCtrl">
    <input ng-model="firstName">
    <input ng-model="lastName">
    <h1>{{ fullName() }}</h1>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope) {
        $scope.firstName = "Macro";
        $scope.lastName = "K";
        $scope.fullName = function () {
            return $scope.firstName + " " + $scope.lastName;
        }
    });
</script>

 

---

全局变量

控制器可以定义全局变量，全局变量可以被其它控制器使用。

<div ng-app="myApp">
    <div ng-controller="myCtrl1">
        <h1>{{ herName }}</h1>
        <h1>{{ myName }}</h1>
    </div>
    <div ng-controller="myCtrl2">
        <h1>{{ herName }}</h1>
        <h1>{{ myName }}</h1>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl1', function ($scope, $rootScope) {
        $scope.herName = "Lucy";
        $rootScope.myName = "Macro K";
    });
    app.controller('myCtrl2', function ($scope) {
        $scope.herName = "Mary";
    });
</script>

 

为了避免局部变量与全局变量混淆，变量前面应加上“$root.”。

<div ng-app="myApp">
    <div ng-controller="myCtrl">
        <h1>{{ myName }}</h1>
        <h1>{{ $root.myName }}</h1>
    </div>
</div>
<script type="text/javascript">
    var app = angular.module('myApp', []);
    app.controller('myCtrl', function ($scope, $rootScope) {
        $scope.myName = "Lucy";
        $rootScope.myName = "Macro K";
    });
</script>