财神捕鱼怎么玩才能赢

書名： AngularJS入門與進階
作者名：江榮波
本章字數： 505字
更新時間： 2020-11-28 23:44:30

3.4 控制器的作用域范圍

前面我們了解到使用ng-controller指令實例化控制器時會產生一個新的作用域對象，而且同一個頁面中可以使用多個ng-controller指令來實例化不同的控制器對象。但是需要注意的是，每個控制器對應的作用域對象只能與ng-controller指令所在標簽的開始標簽與結束標簽之間的DOM元素建立數據綁定。為了證明這個觀點，我們不妨看一下下面的案例。

代碼清單：ch03\ch03_02.html

        <!doctype html>
        <html ng-app="app">
        <head>
            <meta charset="UTF-8">
            <title>ch03_02</title>
            <script type="text/javascript" src="../angular-1.5.5/angular.js">
            </script>
        </head>
        <body>
            <div ng-controller="UserController" style="border:#ccc solid 1px; ">
                用戶名：<input type="text" ng-model="name" placeholder="用戶名"/>
                密碼：<input type="password" ng-model="pword" placeholder="密碼"/>
                <button>提交</button>
                <p>您輸入的用戶名：{{name}}</p>
                <p>您輸入的密碼：{{pword}}</p>
            </div>
            <br/>
            <div ng-controller="InfoContoller" style="border:#ccc solid 1px; ">
                個人愛好：<input type="text" ng-model="love" placeholder="個人愛好"/>
                <p>您輸入的個人愛好：{{love}}</p>
            </div>
            <script>
                function UserController（$scope, $log）{
                    $scope.name="admin";
                    $scope.pword="123456";
                    $log.info（"UserController->name:" +$scope.name）;
                    $log.info（"UserController->pword:" + $scope.pword）;
                }
                function InfoContoller（$scope, $log）{
                    $scope.love="足球";
                    $log.info（"InfoContoller->name:" + $scope.name）;
                    $log.info（"InfoContoller->pword:" + $scope.pword）;
                    $log.info（"InfoContoller->love:" + $scope.love）;
                }
                var app = angular.module（"app", []）;
                app.controller（"UserController", UserController）;
                app.controller（"InfoContoller", InfoContoller）;
            </script>
        </body>
        </body>
        </html>

在瀏覽器中運行ch03_02.html，打開開發人員工具，效果如圖3.2所示。

圖3.2 控制器作用域范圍演示案例

控制臺輸出內容如下：

        UserController->name:admin
        UserController->pword:123456
        InfoContoller->name:undefined
        InfoContoller->pword:undefined
        InfoContoller->love：足球

在本案例中，使用ng-controller指令實例化了兩個控制器UserController和InfoContoller。AngularJS框架自動為每個控制器實例創建一個作用域對象，但是每個作用域對象只能與ng-controller所在的開始標簽和結束標簽之間的DOM元素進行數據綁定，我們可以通過$log日志服務分別在UserController和InfoContoller中輸出$scope作用域對象的屬性。由于用戶名和密碼輸入框只能和UserController中的作用域對象進行數據綁定，因此在InfoContoller控制器中輸出作用域對象的name和pword屬性時輸出結果為undefined。

官术网_书友最值得收藏!

AngularJS入門與進階

3.4 控制器的作用域范圍