formations/javascript/angular/scope-1.md

1023 B

.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>
  <body ng-app="myApp">

    <div ng-controller="MyAppCtrl">
      <!-- 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" -->
      <button ng-click="myButtonClickHandler()"></button>
    </div>

    <script src="angular.js"></script>
    <script>
      angular.module('myApp', [])
        .controller('MyAppCtrl', ['$scope', function($scope) {

          $scope.myValue = 'Foo !'

          $scope.myButtonClickHandler = function() { alert('Click !'); };

        }]);
    </script>
  </body>
</html>