為什么80%的碼農都做不了架構師？>>> ??

#1. 控制器的作用 AngularJS控制器控制AngularJS應用程序的數據，是常規的JavaScript對象。

#2.控制器的定義

ng-controller指令就是用來定義應用程序控制器的，并且同時創建了一個新的作用域關聯到相應的DOM元素上。

3.樹形作用域

作用域：

所謂作用域就是一個指向應用模型的對象，它是表達式的執行環境，作用域有層次結構，這個層次和相應的DOM幾乎是一樣的，作用域能監控表達式和傳遞事件并且可以從父作用域繼承屬性。

每一個AngularJS應用都有一個絕對的根作用域。但也可能有多個子作用域。

一個應用可以有多個作用域，因為有一些指令會生成新的子作用域，當新作用域被創建的時候，他們會被當成子作用域添加到父作用域下，這使得作用域會變成一個和相應DOM結構一個的樹狀結構。

4. 一個指向應用模型的對象(也就是$scope)

`$scope就是把一個DOM元素（應用程序）連結到控制器上的對象

5. dmeo創建控制器

<div ng-app="" ng-controller="MyController">請輸入一個名字：<input type="text" ng-model="person.name"> Hello <span ng-bind="person.name"></span> </div> <script> function MyController($scope) {$scope.person = {name: "World"}; } </script>

屬性：

我們通過ng-controller指令創建了一個JavaScript對象 —— MyController并帶有name屬性，那參數$scope是什么呢，代表什么意思呢。

#6. 控制器參數 $scope（對象） 現在我們就來解答MyController對象參數 —— $scope。

$scope就是把一個DOM元素連結到控制器上的對象，它提供一個綁定到DOM元素(以及其子元素)上的執行上下文。它也是一個JavaScript對象，指向應用程序作用域內的所有HTML元素和執行上下文。作用域呢，就是作為$scope的數據屬性關聯到DOM上的，并且能在需要調試的時候被獲取到。

---

要明確創建一個$scope對象，我們就要給DOM元素安上一個controller對象，使用的是ng-controller 指令屬性。

#7. 作用域繼承

所有$scope都遵循原型繼承，這意味著它們都能訪問父$scope們,對任何屬性和方法，如果AngularJS在當前$scope上找不到，就會到父$scope上去找，如果在父$scope上也沒找到，就會繼續向上回溯，一直到$rootScope上，這個$rootScope是最頂級的$scope，它對應著含有 ng-app指令屬性的那個DOM元素，也就是說根作用域關聯的DOM就是ng-app指令定義的地方。

也就是說，擁有了$scope，我們就可以操作作用域內任何我們想要獲取的對象數據。

8. 控制器的方法

控制器不僅聲明屬性也可以聲明方法，如下所示：

<div ng-app="" ng-controller="MyController">Your name:<input type="text" ng-model="username"><button ng-click="sayHello()">打招呼</button><hr />{{greeting}} </div><script> function MyController($scope) {$scope.username = 'World';$scope.sayHello = function() {$scope.greeting= 'Hello ' + $scope.username + '!';}; } </script>

#9. 外部控制器

<script src="MyController.js"></script>

轉載于:https://my.oschina.net/oneboi/blog/794106

總結

以上是生活随笔為你收集整理的6.控制器的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。