formations/javascript/angular/scope-1.md

37 lines
1023 B
Markdown
Raw Normal View History

# .cadoles-slide-title[L'objet $scope (1/4)]
.cadoles-small[
- L'object `$scope` est le lien entre la logique métier de votre contrôleur et le DOM.
- C'est le contexte utilisé lors des opérations de liaison de données.
- C'est également le principal médium de gestion des interactions de l'utilisateur avec votre application.
]
**Exemple**
```html
<html>
<body ng-app="myApp">
<div ng-controller="MyAppCtrl">
2015-04-08 23:22:53 +02:00
<!-- Liaison de donnée avec la propriété "myValue" du $scope -->
<span>{{ myValue }}</span>
<!-- La directive "ng-click" associe la méthode exposée sur le $scope à l'évènement "onclick" -->
2015-04-08 23:22:53 +02:00
<button ng-click="myButtonClickHandler()"></button>
</div>
<script src="angular.js"></script>
<script>
2015-04-09 20:36:17 +02:00
angular.module('myApp', [])
2015-04-09 00:19:37 +02:00
.controller('MyAppCtrl', ['$scope', function($scope) {
2015-04-09 00:19:37 +02:00
$scope.myValue = 'Foo !'
2015-04-09 00:19:37 +02:00
$scope.myButtonClickHandler = function() { alert('Click !'); };
2015-04-08 23:22:53 +02:00
2015-04-09 00:19:37 +02:00
}]);
</script>
</body>
</html>
```