為什么80%的碼農(nóng)都做不了架構(gòu)師？>>> ??

#1. 控制器的作用 AngularJS控制器控制AngularJS應(yīng)用程序的數(shù)據(jù)，是常規(guī)的JavaScript對象。

#2.控制器的定義

ng-controller指令就是用來定義應(yīng)用程序控制器的，并且同時創(chuàng)建了一個新的作用域關(guān)聯(lián)到相應(yīng)的DOM元素上。

3.樹形作用域

作用域：

所謂作用域就是一個指向應(yīng)用模型的對象，它是表達(dá)式的執(zhí)行環(huán)境，作用域有層次結(jié)構(gòu)，這個層次和相應(yīng)的DOM幾乎是一樣的，作用域能監(jiān)控表達(dá)式和傳遞事件并且可以從父作用域繼承屬性。

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

一個應(yīng)用可以有多個作用域，因?yàn)橛幸恍┲噶顣尚碌淖幼饔糜?#xff0c;當(dāng)新作用域被創(chuàng)建的時候，他們會被當(dāng)成子作用域添加到父作用域下，這使得作用域會變成一個和相應(yīng)DOM結(jié)構(gòu)一個的樹狀結(jié)構(gòu)。

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

`$scope就是把一個DOM元素（應(yīng)用程序）連結(jié)到控制器上的對象

5. dmeo創(chuàng)建控制器

<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指令創(chuàng)建了一個JavaScript對象 —— MyController并帶有name屬性，那參數(shù)$scope是什么呢，代表什么意思呢。

#6. 控制器參數(shù) $scope（對象） 現(xiàn)在我們就來解答MyController對象參數(shù) —— $scope。

$scope就是把一個DOM元素連結(jié)到控制器上的對象，它提供一個綁定到DOM元素(以及其子元素)上的執(zhí)行上下文。它也是一個JavaScript對象，指向應(yīng)用程序作用域內(nèi)的所有HTML元素和執(zhí)行上下文。作用域呢，就是作為$scope的數(shù)據(jù)屬性關(guān)聯(lián)到DOM上的，并且能在需要調(diào)試的時候被獲取到。

---

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

#7. 作用域繼承

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

也就是說，擁有了$scope，我們就可以操作作用域內(nèi)任何我們想要獲取的對象數(shù)據(jù)。

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>

轉(zhuǎn)載于:https://my.oschina.net/oneboi/blog/794106

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。