AngularJS 1.x系列：AngularJS控制器（3）

libingql發表於2017-05-30
AngularJS

1. 控制器（Controller）定義

　　控制器（Controller）在AngularJS中作用是增強檢視（View），AngularJS控制器是一個構造方法，用來向檢視（View）中新增額外功能。

　　ng-controller指令定義AngularJS應用程式控制器。

　　控制器是JavaScript物件，由標準的JavaScript物件的建構函式建立。

　　當控制器通過ng-controller指令被新增到DOM頁面時，AngularJS會通過控制器建構函式生成一個物件。

　　在生成建構函式物件過程中，$scope物件作為引數注入其中，並允許訪問$scope物件。

　　通過$scope物件與頁面中的元素進行資料繫結，實現資料從控制器（Controller）到檢視（View）的過程。

2. 控制器初始化$scope物件

　　控制器（Controller）的作用是操作$scope物件，具體表現在：

　　◊ 初始化$scope物件

　　◊ 為$scope物件新增自定義實現

　　$scope物件可以看作是由控制器（Controller）封裝後的ViewModel。

2.1 初始化$scope物件

　　示例程式碼：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("HelloCtrl", function($scope){
                $scope.text = "Hello World!";
            });
        </script>
    </head>
    <body>
        <div ng-controller="HelloCtrl">
            <div ng-bind="text"></div>
        </div>
    </body>
</html>

2.2 為$scope物件新增自定義方法

　　示例程式碼：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("HelloCtrl", function($scope){
                $scope.text = "Hello World!";
                $scope.getText = function(){
                    $scope.text = "Hello AngularJS!";
                    return $scope.text;
                };
            });
        </script>
    </head>
    <body>
        <div ng-controller="HelloCtrl">
            <div ng-bind="text"></div>
            <input type="button" value="ChangeText" ng-click="getText()" />
        </div>
    </body>
</html>

2.3 為$scope物件新增帶引數方法

　　示例程式碼：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("HelloCtrl", ["$scope", function($scope){
                $scope.text = "Hello World!";
                $scope.getText = function(){
                    $scope.text = "Hello AngularJS!";
                    return $scope.text;
                };
                $scope.setText = function(param){
                    $scope.text = param;
                };
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="HelloCtrl">
            <div ng-bind="text"></div>
            <input type="button" value="ChangeText" ng-click="setText('Hello AngularJS!')" />
        </div>
    </body>
</html>

　　$scope物件方法多個引數之間逗號（，）隔開

2.4 $scope物件屬性和方法的繼承

　　AngularJS中的“ng-controller”指令允許在不同層次元素中指定控制器，處於內層控制器中的$scope物件將會自動繼承外層控制器中的$scope物件的屬性和方法。

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("ParentCtrl", ["$scope", function($scope){
                $scope.text = "Text";
            }]);
            app.controller("ChildCtrl", ["$scope", function($scope){
                $scope.child_text = "Child Text";
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="ParentCtrl">
            <div ng-bind="text"></div>
            <div ng-controller="ChildCtrl">
                <div ng-bind="child_text"></div>
            </div>
        </div>
    </body>
</html>

3. 作用域（Scope）

　　作用域（scope）是構成AngularJS應用的核心基礎，AngularJS將$scope設計成和DOM類似的結構，$scope可以進行巢狀，可以引用父級$scope中的屬性和方法。

3.1 $rootScope

　　AngularJS啟動並生成檢視時，會將根ng-app元素同$rootScope進行繫結。$rootScope是所有$scope物件的最上層。

　　$rootScope是AngularJS中最接近全域性作用域的物件，不建議在$rootScope上繫結太多業務邏。

　　所有的應用都有一個$rootScope，可以作用在ng-app指令包含的所有HTML元素中。

　　$rootScope可作用於整個應用中。在$rootscope中定義的屬性及方法，可以在各個controller的$scope中使用。 

　　示例程式碼：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.run(["$rootScope", function($rootScope){
                $rootScope.text = "Hello AngularJS!";
            }]);
        </script>
    </head>
    <body>
        {{ text }}
    </body>
</html>

3.2 $scope

　　AngularJS中$scope物件作為資料模型，自定義屬性和方法，可以在控制器（Controller）和檢視（View）中使用。

　　$scope物件的生命週期處理有四個不同階段:

　　1>.建立

　　在建立控制器（Controller）或指令時，AngularJS會用$injector建立一個新的作用域（$scope），並在這個新建的控制器（Controller）或指令執行時注入作用域（$scope）。

　　2>.連結

　　當Angular開始執行時，所有的$scope物件都會附加或者連結到檢視中。

　　所有建立$scope物件的函式也會將自身附加到檢視中。

　　這些作用域將會註冊當Angular應用上下文中發生變化時需要執行的$watch函式。

　　3>.更新

　　當事件迴圈執行時，它通常執行在頂層$scope物件上（被稱作$rootScope），每個子作用域都執行自己的髒值檢測。每個監控函式都會檢查變化。如果檢測到任意變化，$scope物件就會觸發指定的回撥函式。

　　4>.銷燬

　　當一個$scope在檢視中不再需要時，這個作用域將會清理和銷燬自己。

　　示例程式碼：

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("HelloCtrl", ["$scope", function($scope){
                $scope.text = "Hello AngularJS!";
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="HelloCtrl">
            {{ text }}
        </div>
    </body>
</html>

　　ng-controller指令為這個DOM元素建立了一個新的$scope物件，並將它巢狀在$rootScope中。

　　$scope與$rootScope具有相同屬性或方法時，$scope將覆蓋$rootScope中相同屬性或方法。

<!DOCTYPE html>
<html ng-app="app">
    <head>
        <meta charset="utf-8" />
        <script src="../lib/angular.min.js"></script>
        <script type="text/javascript">
            var app = angular.module("app", []);
            app.controller("HelloCtrl", ["$scope", "$rootScope", function($scope, $rootScope) {
                $rootScope.text = "Hello";
                // $scope.text = "Hello AngularJS!";
            }]);
        </script>
    </head>
    <body>
        <div ng-controller="HelloCtrl">
            {{ text }}
        </div>
    </body>
</html>

相關文章