《我的Angular入坑記》——初識scope物件
阿新 • • 發佈：2019-01-13
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="angular.min.js"></script> </head> <body ng-app="test"> <div ng-controller="ctrl"> 商品名稱：{{goods.title}}<br/> 價格：{{goods.price}}<br/> 購買數量：{{goods.num}} 件<br/> 總計：{{goods.price*goods.num}}元<br/> <!--不要與onclick混淆--> <button ng-click="add()">增加</button> <button ng-click="reduce()">減少</button> </div> <script> //例項化一個模組，模組管理的DOM節點是<body ng-app="test">...</body> var m = angular.module('test', []); //操作一個控制器，第一個引數為控制器的名字,第一個scope為實參，第二個為形參，第二個的名稱是可以改變的 //scope 是一個 JavaScript 物件，帶有屬性和方法，這些屬性和方法可以在檢視和控制器中使用 m.controller('ctrl', ['$scope', function ($scope) { $scope.goods = {'title': 'apple mac', 'price': 300, 'num': 0}; $scope.add = function () { //設定最多6件貨物：自加之後與6比較大小，取較小的那個數 $scope.goods.num = Math.min(++$scope.goods.num, 6); } $scope.reduce = function () { //設定最少0件貨物：自剪之後與0比較大小，取較大的那個數 $scope.goods.num = Math.max(--$scope.goods.num, 0); } }]) </script> </body> </html>
效果如圖：
關於在操作控制器時，注入scope物件還有另外一種寫法，但是這種寫法容易出bug
可以看到，在操作控制器時只傳入了一個scope，但這在函式裡面是識別為形參的。當我們的網站要最求載入速度的時候往往會去壓縮程式碼檔案，而壓縮程式碼檔案就會自動將形參替換為如：a 這樣的單字母名稱，這時網站內容就不能正常顯示了var app = angular.module('test', []); app.controller('ctrl', function ($scope) { $scope.firstName = 'John'; $scope.lastName = 'Doe'; $scope.fullName = function () { return $scope.firstName + " " + $scope.lastName; } });