scope對象 · angular

[TOC] ## 添加$scope對象屬性 #### 項目結構【以及bower.json內容】 ![](https://box.kancloud.cn/2016-09-08_57d04c4ca417f.png) #### app.js ~~~js //創建模塊 angular.module('myapp',['ngSanitize']); ~~~ #### index.js ~~~js //創建控制器c1 angular.module('myapp').controller('c1',['$scope',function ($scope) { //創建$scope對象的屬性name $scope.name='hzj'; // 創建$scope對象的屬性text，但是字符串的值為一個html標簽 $scope.text='<hr>'; }]); ~~~ #### index.html【使用了ng-bind指令】 ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>   <h1 ng-bind="name"></h1>  <h1>{{text}}</h1>  <h1 ng-bind="text"></h1> </div> </body> </html> ~~~ ## 通過表達式綁定$scope對象屬性 * 如果不在指令屬性里面綁定$scope對象屬性那么需要添加{{}} ~~~html <h1>{{text}}</h1> ~~~ * 如果使用指令綁定$scope對象屬性那么不需要添加{{}} ~~~html <h1 ng-bind="text"></h1> ~~~ * 如果在非angular指令綁定綁定$scope對象屬性那么也需要添加{{}} ~~~html <img src="img/a.jpg" title="{{name}}"> ~~~ ## 添加$scope對象方法 #### index.js ~~~js //創建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($scope) { //創建$scope對象的屬性 $scope.name = 'hzj'; //創建$scope對象的方法，也就是函數類型 // 一把情況下方法都會綁定到對應的html事件上面。 // 雖然表達式可以執行方法，但是最好不要這么做，因為方法一般都是由事件驅動。 // 而表達式就是為了顯示一個結果 $scope.add = function () { //使用一個add方法改變 $scope.name的屬性值，切記這里可不是使用this //this.name='QQ';這樣是錯誤的 $scope.name = 'QQ'; }; }]); ~~~ ## 通過表達式綁定$scope對象方法 #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>   <h1>{{add()}}</h1> </div> </body> </html> ~~~ ## 在事件中綁定$scope對象方法 #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>  <button ng-click="add()">點擊</button> </div> </body> </html> ~~~ ## 添加帶參數的$scope對象方法 #### index.js ~~~js //創建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($scope) { // 創建$scope對象的屬性 //不論你的$scope.result值是undefined還是null,在HTML上都會顯示空白,不會報錯 //所以不必設置初始值，這也是angular的一個容錯優勢 $scope.result; //創建$scope對象的方法，也就是函數類型 //并且帶有參數a和b $scope.add = function (a, b) { //這里使用了Number轉換為數字，免得變成字符串相加了 $scope.result = Number(a) + Number(b); }; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{result}}</h1>  <button ng-click="add(100,200)">點擊</button> </div> </body> </html> ~~~ ## $scope對象方法的返回值return #### index.js ~~~js //創建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($scope) { //創建$scope對象的方法，也就是函數類型 //并且帶有參數a和b //并且具備返回值 //其實這種帶返回值的一般都會在控制器或者服務或者過濾器中使用， //并不會利用返回值，然后使用表達式來綁定返回值，因為表達式可以直接綁定scope屬性 $scope.add = function (a, b) { return Number(a)+Number(b); }; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">    <h1>{{add(100,200)}}</h1> </div> </body> </html> ~~~ ## $scope對象總結其實知道JavaScript原理的同學很容易理解，$scope對象創建方法也好，$scope對象創建屬性也好，其實都是統稱為$scope對象創建屬性，因為JavaScript為弱類型，方法其實就是函數類型，當然還有數組、對象等等其它各種類型。所以這里我們并不希望使用函數類型綁定在表達式上面，函數類型通常都會出現在事件、服務、自定義過濾器等等場景中。 ## $scope對象屬性和方法的繼承 * 首先孩子無條件繼承父親的所有，父親無法繼承孩子的所有，這個規則在哪里都適用。 * 在angular中控制器作用域可以形成繼承，主要是在HTML中體現，在JS代碼中不會體現 #### index.js ~~~js //JS代碼中并不能看出c1與c2的關系 //創建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($scope) { //創建$scope對象的屬性 $scope.name = 'hzj'; }]); //創建控制器c2 angular.module('myapp').controller('c2', ['$scope', function ($scope) { //創建$scope對象的屬性 $scope.sex = '男'; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>     <div ng-controller="c2">  <h2>{{name}}</h2>  <h2>{{sex}}</h2> </div> </div> </body> </html> ~~~ ## 該死的全局變量怎么辦$rootScope * 首先$rootScope首次出現，那么$rootScope是所有$scope的父親,因此在$rootScope上面添加的屬性，所有$scope都能使用 * 但是，不會直接在$rootScope上添加屬性達到全局變量目的，中級部分我們學習了自定義服務和提供者我們就有另外的方案來處理全局變量了 * 但不管怎么說，千萬不要在某個js文件里面直接來一個var xx='xx'做全局變量 ##從新回到app.js里面給$rootScope添加屬性 #### app.js ~~~js //創建模塊 angular.module('myapp',[]); //使用myapp模塊的run方法,初始化$rootScope對象 angular.module('myapp').run(['$rootScope',function ($rootScope) { $rootScope.PI=3.14; }]); ~~~ #### index.js ~~~js //創建控制器c1 angular.module('myapp').controller('c1', ['$scope', function ($rootScope, $scope) { //創建$scope對象的屬性 $scope.name = 'hzj'; }]); ~~~ #### index.html ~~~html <!DOCTYPE html>  <html lang="en" ng-app="myapp"> <head> <meta charset="UTF-8"> <title>Title</title>  <script src="bower_components/angular/angular.min.js"></script>  <script src="js/app.js"></script>  <script src="js/index.js"></script> </head> <body>  <div ng-controller="c1">  <h1>{{name}}</h1>  <h1>{{PI}}</h1> </div> </body> </html> ~~~