AngularJS Skop(skop)
Skop ialah pautan antara HTML (paparan) dan JavaScript (pengawal).
Skop ialah objek dengan kaedah dan sifat yang tersedia.
Skop boleh digunakan pada paparan dan pengawal.
Cara menggunakan Scope
Apabila anda mencipta pengawal dalam AngularJS, anda boleh melepasi objek $scope sebagai parameter:
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>{{carname}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.carname = "Volvo";
});
</script>
<p>控制器中创建一个属性名 "carname"，对应了视图中使用 {{ }} 中的名称。</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat instance dalam talian
Apabila dalam Apabila objek $scope ditambahkan pada pengawal, paparan (HTML) boleh memperoleh sifat ini. Dalam paparan
, anda tidak perlu menambah awalan $scope, anda hanya perlu menambah nama atribut, seperti: {{carname}} .
Gambaran Keseluruhan Skop
Aplikasi AngularJS terdiri daripada yang berikut:
Lihat (pandangan), iaitu HTML.
Model (model), data yang tersedia dalam paparan semasa.
Pengawal, iaitu fungsi JavaScript yang boleh menambah atau mengubah suai sifat.
skop ialah modelnya.
Skop ialah objek JavaScript dengan sifat dan kaedah yang boleh digunakan dalam paparan dan pengawal.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>我的名字是 {{name}}</h1>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.name = "John Doe";
});
</script>
<p>当你修改输入框中的值时，会影响到模型(model),当然也会影响到控制器对应的属性值。</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Skop
Adalah sangat penting untuk memahami skop yang anda sedang gunakan.
Dalam dua contoh di atas, hanya terdapat satu skop, jadi ia agak mudah untuk dikendalikan, tetapi dalam projek besar, terdapat berbilang skop dalam HTML DOM, maka anda perlu mengetahui skop yang anda gunakan Yang manakah skop yang sepadan?
Setiap elemen <li> boleh mengakses objek berulang semasa, yang sepadan dengan rentetan dan diwakili oleh pembolehubah x.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<ul>
<li ng-repeat="x in names">{{x}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {
$scope.names = ["Emil", "Tobias", "Linus"];
});
</script>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
Skop Root
Semua aplikasi mempunyai $rootScope, yang boleh digunakan pada semua elemen HTML yang terkandung dalam ng-app arahan .
$rootScope boleh digunakan sepanjang aplikasi. Ia adalah jambatan antara skop dalam setiap pengawal. Nilai yang ditakrifkan dengan rootscope boleh digunakan dalam setiap pengawal.
Instance
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="http://apps.bdimg.com/libs/angular.js/1.4.6/angular.min.js"></script>
</head>
<body>
<div ng-app="myApp" ng-controller="myCtrl">
<h1>姓氏为 {{lastname}} 家族成员:</h1>
<ul>
<li ng-repeat="x in names">{{x}} {{lastname}}</li>
</ul>
</div>
<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $rootScope) {
$scope.names = ["Emil", "Tobias", "Linus"];
$rootScope.lastname = "Refsnes";
});
</script>
<p>注意 $rootScope 在循环对象内外都可以访问。</p>
</body>
</html>Run Instance»
Klik butang "Run Instance" untuk melihat contoh dalam talian
