Isolierter Scope – Tutorial AngularJS Crashkurs

  • Ein isolierter Scope existiert unabhängig vom Parent-Scope und erbt auch nicht von dessen Eigenschaften
  • By default erbt eine Direktive von ihrem Scope, da die Eigenschaft scope auf false gesetzt ist
  • Wird die Eigenschaft scope jedoch auf true gesetzt, erbt diese nicht mehr von ihrem Parent-Scope, kann aber wie auch bei scope=false trotzdem weiterhin auf den Parent-Scope zugreifen
  • Wird nun ein isolierter Scope in einer Direktive definiert, kommen die drei Optionen @,= und & zum Zuge
  • @
  • Bindet Text
  • Notation über {{ }} im HTML
  • =
  • Two-way-Bindung
  • Kann irgendeinen Typ enthalten
  • Notation über “ “ im HTML
  • &
  • On-way-Bindung
  • Kann irgendeinen Typ enthalten
  • Notation über “ “ im HTML
  • Wird vor allem für Funktionen mit Übergabe-Parameter verwendet die Werte von      der Direktive zum Kontroller liefert
  • Verweise
  • Siehe auch Video Scopes – 006
  • Siehe auch Video Direktiven – 015

Isolated-@

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Isolierter Scope – Text binding</title>
</head>
<body>

<div ng-app=„myApp“ ng-controller=myCtrl>
<div string value={{ctrlValue}}></div>
</div>

<script>
var app = angular.module(„myApp“, []);

app.controller(‚myCtrl‘, function($scope) {
$scope.ctrlValue = ‚http://easeflow.net/‘;
});

app.directive(’string‘, function() {
return {
scope: {
value: ‚@‘
},
template: ‚{{value}}</div>‘
};
});
</script>

</body>

</html>

Isolatet-=

<!DOCTYPE html>
<html>
<script src=„lib/angular.js“></script>
<head lang=„en“>
<meta charset=„UTF-8“>
<title>Isolierter Scope – Two way binding</title>
</head>
<body>

<div ng-app=„myApp“ ng-controller=myCtrl>
<div object value=„ctrlValue“></div>
</div>

<script>
var app = angular.module(„myApp“, []);

app.controller(‚myCtrl‘, function($scope) {
$scope.ctrlValue = ‚http://easeflow.net/wordpress‘;
});

app.directive(‚object‘, function() {
return {
scope: {
value: ‚=‘
},
template: ‚<div>{{value}}</div>‘
};
});
</script>

</body>

</html>

Isolated-&

<!DOCTYPE html>
<html>
<script src=“lib/angular.js“></script>
<head lang=“en“>
<meta charset=“UTF-8″>
<title>Isolierter Scope – One way binding</title>
</head>
<body>

<div ng-app=“myApp“ ng-controller=“myCtrl“>
<div invoke param=“execute(message)“></div>
{{message}}
</div>

<script>
var app=angular.module(„myApp“, []);

app.controller(„myCtrl“, function($scope) {
$scope.execute=function(message) {
$scope.message=message;
};
});

app.directive(„invoke“, function() {
return {
scope: {
param: „&“
},
template: ‚<input type=“text“ ng-model=“value“>‘  +
‚<button class=“button“ ng-click=“param({message:value})“>Submit</button>‘
};
});
</script>

</body>

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.