AngularJS 範圍詳解及範例程式碼

AngularJS 範圍詳解及範例程式碼_AngularJS

最後更新：2017-01-19 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

範圍扮演其視圖連接導向器的角色一個特殊的JavaScript對象。範圍包含了模型資料。在控制器，模型資料通過$scope對象訪問。

<script>   var mainApp = angular.module("mainApp", []);   mainApp.controller("shapeController", function($scope) {     $scope.message = "In shape controller";     $scope.type = "Shape";   });</script>

以下是在上面的例子中需要考慮的重要問題。

$scope被作為第一個參數在其構造器確定指標到控制器。

$scope.message 和 $scope.type 是它們在HTML頁面中所用的模型。

我們已經設定模型的值將反映應用程式模組的控制器shapeController中。

我們可以在$scope定義函數功能。

繼承範圍

範圍是特定的控制器。如果我們定義嵌套的控制器，然後控制器子將繼承其父控制的範圍。

<script>   var mainApp = angular.module("mainApp", []);   mainApp.controller("shapeController", function($scope) {     $scope.message = "In shape controller";     $scope.type = "Shape";   });    mainApp.controller("circleController", function($scope) {     $scope.message = "In circle controller";     });</script>

以下是在上面的例子中需要考慮的重要問題。

我們在shapeController設定模型的值。

我們覆蓋的子控制器circleController訊息。當“訊息”內的控制器circleController的模組使用時，將用於重寫的訊息。

例子

下面的例子將展示上述所有指令。

testAngularJS.html

<html><head>  <title>Angular JS Forms</title></head><body>  <h2>AngularJS Sample Application</h2>  <div ng-app="mainApp" ng-controller="shapeController">   <p>{{message}} <br/> {{type}} </p>   <div ng-controller="circleController">     <p>{{message}} <br/> {{type}} </p>   </div>   <div ng-controller="squareController">     <p>{{message}} <br/> {{type}} </p>   </div>  </div>  <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>  <script>   var mainApp = angular.module("mainApp", []);   mainApp.controller("shapeController", function($scope) {     $scope.message = "In shape controller";     $scope.type = "Shape";   });   mainApp.controller("circleController", function($scope) {     $scope.message = "In circle controller";     });   mainApp.controller("squareController", function($scope) {     $scope.message = "In square controller";     $scope.type = "Square";   });  </script></body></html>

結果

在Web瀏覽器開啟textAngularJS.html。看到結果如下。

以上就是對AngularJS 範圍的資料整理，後續繼續補充相關資料，謝謝大家對本站的支援！

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More