2015-04-06 17:50:08 +02:00
|
|
|
# .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>
|
2015-04-06 17:50:08 +02:00
|
|
|
<!-- 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>
|
2015-04-06 17:50:08 +02:00
|
|
|
</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-06 17:50:08 +02:00
|
|
|
|
2015-04-09 00:19:37 +02:00
|
|
|
$scope.myValue = 'Foo !'
|
2015-04-06 17:50:08 +02:00
|
|
|
|
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
|
|
|
}]);
|
2015-04-06 17:50:08 +02:00
|
|
|
</script>
|
|
|
|
|
</body>
|
|
|
|
|
</html>
|
|
|
|
|
```
|
