AngularJS => Utilisation de directives intégrées

Masquer / Afficher les éléments HTML

Cet exemple cache des éléments HTML.

<!DOCTYPE html>
<html ng-app="myDemoApp">
  <head>
    <script src="https://code.angularjs.org/1.5.8/angular.min.js"></script>
    <script>

      function HideShowController() {
        var vm = this;
        vm.show=false;
        vm.toggle= function() {
          vm.show=!vm.show;
        }
      }
      
      angular.module("myDemoApp", [/* module dependencies go here */])
        .controller("hideShowController", [HideShowController]);
    </script>
  </head>
  <body ng-cloak>
    <div ng-controller="hideShowController as vm">
      <a style="cursor: pointer;" ng-show="vm.show" ng-click="vm.toggle()">Show Me!</a>
      <a style="cursor: pointer;" ng-hide="vm.show" ng-click="vm.toggle()">Hide Me!</a>
    </div>
  </body>
</html>

Démo en direct

Explication étape par étape:

ng-app="myDemoApp" , la directive ngApp indique angulairement qu'un élément DOM est contrôlé par un module angulaire spécifique nommé "myDemoApp".
<script src="[//angular include]"> inclut les js angulaires.
HideShowController fonction HideShowController est définie et contient une autre fonction nommée toggle qui aide à masquer l' HideShowController l'élément.
angular.module(...) crée un nouveau module.
.controller(...) Angular Controller et renvoie le module pour le chaînage;
ng-controller directive ng-controller est un aspect clé de la manière dont angular prend en charge les principes à la base du modèle de conception Model-View-Controller.
ng-show directive ng-show montre l'élément HTML donné si l'expression fournie est vraie.
ng-hide directive ng-hide masque l'élément HTML donné si l'expression fournie est vraie.
ng-click directive ng-click déclenche une fonction de basculement dans le contrôleur

Modified text is an extract of the original Stack Overflow Documentation

Sous licence CC BY-SA 3.0

Non affilié à Stack Overflow

AngularJS
Utilisation de directives intégrées

Recherche…

Masquer / Afficher les éléments HTML