Kapsamı HTML arasındaki bağlanma parçasıdır (view) ve JavaScript (controller) .
kapsamı uygun özelliklere ve yöntemlerle bir amacıdır.
kapsam görünümü ve denetleyicisi için kullanılabilir.
Nasıl Kapsam'ı Kullanılır?
Eğer angularjs bir denetleyici yaptığınızda, pas $scope bağımsız değişken olarak nesneyi:
Örnek
denetleyicisi yapılan Özellikleri, görünümde sevk edilebilir:
<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> Kendin dene " Için özelliklerini eklerken $scope denetleyicisi nesnenin, görünüm (HTML) bu özelliklere erişim alır.
Görünümünde, önek kullanmayın $scope , sadece bir mülküne bakın gibi {{carname}} .
Kapsamını anlama
Biz oluştuğu bir angularjs uygulamayı ele alırsak:
- HTML olan görüntüle.
- Mevcut görünüm için uygun veri modeli.
- değişiklikler / yapar JavaScript işlevi olan Kontrolör, / / veri kontrolleri kaldırır.
Daha sonra, kapsamı Modelidir.
kapsam görünümü ve kontrol hem de mevcuttur özellikleri ve yöntemleri, sahip olan bir JavaScript nesnesidir.
Örnek
Eğer görünümünde değişiklik yaparsanız, modeli ve denetleyici güncellenecektir:
<div ng-app="myApp" ng-controller="myCtrl">
<input ng-model="name">
<h1>My name is {{name}}</h1>
</div>
<script>
var app = angular. module('myApp',
[]) ;
app. controller('myCtrl', function($scope) {
$scope.name
= "John Doe";
});
</script> Kendin dene " Sizin Kapsam'ı bilin
Size herhangi bir zamanda, başa hangi kapsam bilmek önemlidir.
İki örnekte yukarıdaki böylece kapsam bir sorun değildir, ancak daha büyük uygulamalar için belirli kapsamları yalnızca erişebilir HTML DOM bölümler olabilir bilerek tek kapsamı nedir.
Örnek
Ile uğraşırken ng-repeat yönergesi, her yineleme mevcut tekrarlama nesnesine erişim var
<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>
Kendin dene " Her <li> elemanı bu durumda, kullanarak adlandırılan bir dize, cari tekrarlama nesneye erişimi olan x .
Kök Kapsam
Tüm başvurular bir var $rootScope içeren HTML elemanı üzerinde oluşturulan kapsamı ng-app direktifini.
rootScope tüm uygulama mevcuttur.
Değişken hem geçerli kapsamda ve rootScope aynı adı varsa, uygulama geçerli kapsamda birini kullanın.
Örnek
Adında bir değişken "color" kontrolörün hem kapsamı ve rootScope var:
<body ng-app="myApp">
<p>The rootScope's favorite color:</p>
<h1>{{color}}</h1>
<div ng-controller="myCtrl">
<p>The scope of the controller's favorite color:</p>
<h1>{{color}}</h1>
</div>
<p>The rootScope's favorite color is
still:</p>
<h1>{{color}}</h1>
<script>
var app = angular. module('myApp', []) ;
app. run(function($rootScope) {
$rootScope.color = 'blue';
});
app. controller('myCtrl',
function($scope) {
$scope.color = "red";
});
</script>
</body> Kendin dene "