Eğer controller içerisinde yeni bir controller tanımlanırsa o da yeni bir scope oluşturarak üst scope’dan kalıtım sağlar.
<!DOCTYPE
html>
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body ng-app="myApp">
<p>herhangi bir kontrollara bağlı olmadığı için ng-app direktifinin rootscopu devreye girer(global): </p>
<h1>
{{unvan}}
</h1>
<div
ng-controller="unvanCtrl">
<p>unvan
controlları devreye girdiği için kontrollarda tanımlı scope
devreye girer(yerel):
</p> <h1> {{unvan}}
</h1>
</div>
<script>
var
app
= angular.module('myApp', []);
app.run(function($rootScope) {
$rootScope.unvan = 'usta oğretmen';
});
app.controller('unvanCtrl', function($scope) {
$scope.unvan = "öğretmen";
});
</script>
</body>
</html>
rootscope ile scopelar arası bağlantı şeması
Scope controllar kalıtım örneği
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="myApp">
<div
ng-controller="babaCtrl">
<h1>
{{title}}</h1>
<div
ng-controller="evlatCtrl">
<h1>{{title}}</h1>
</div>
</div>
<script>
var app = angular.module('myApp', []);
app.controller("babaCtrl", [ '$scope',
function($scope){
$scope.title = "ben babayım.";
}]);
app.controller("evlatCtrl", [ '$scope',
function($scope){
}]);
</script>
</body>
</html>
- Evlat controller, kendine ait title scopu olmadığı için bir ust controllardaki title scopu kendine miras aldı
- Evlat Controllerın kendi scopu olsaydı ilk ona bakardı
app.controller("evlatCtrl", [ '$scope',
function($scope){
$scope.title = "ben evlat";
}]);
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="myApp">
<div
ng-controller="babaCtrl">
<h1> {{title}}</h1>
<div ng-controller="evlatCtrl">
<h1>{{$parent.title}}</h1>
</div>
</div>
<script>
var
app
= angular.module('myApp', []);
app.controller("babaCtrl", [ '$scope',
function($scope){
$scope.title
= "ben babayım.";
}]);
app.controller("evlatCtrl", [ '$scope',
function($scope){
$scope.title
= "ben evlat";
}]);
</script>
</body>
</html>
<html>
<script src="https://code.angularjs.org/1.5.0/angular.js"></script>
<body
ng-app="myApp">
<div
ng-controller="buyukbabaCtrl">
<h1>
{{title}}</h1>
<div
ng-controller="babaCtrl">
<h1> {{$parent.title}}</h1>
<div ng-controller="evlatCtrl">
<h1>{{$parent.$parent.title}}</h1>
</div>
</div>
</div>
<script>
var
app
= angular.module('myApp', []);
app.controller("buyukbabaCtrl", [ '$scope',
function($scope){
$scope.title
= "ben buyuk
babayım."; }]);
app.controller("babaCtrl", [ '$scope',
function($scope){
$scope.title = "ben babayım."; }]);
app.controller("evlatCtrl", [ '$scope',
function($scope){
$scope.title = "ben evlat"; }]);
</script>
</body>
</html>
Hiç yorum yok:
Yorum Gönder