web-dev-qa-db-fra.com

plusieurs contrôleurs angularjs sur une seule page

J'ai une page avec plusieurs contrôleurs, l'un des contrôleurs est utilisé dans 2 div différents dans la même page. Je ne sais pas si c'est une question de portée ou si je manque quelque chose dans mon code.

voici le plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview

Je souhaite masquer la zone de texte lorsque l'utilisateur clique sur le lien "Économies", affiche la boîte en cliquant sur le lien "Coût".

javascriptangularjsangularjs-scopecontrollers
19
Annie C

Chaque fois que vous utilisez ng-controller, vous créez une nouvelle instance dudit contrôleur, avec sa propre portée. Si vous définissez subCCtrl sur la balise body (ou un nouveau parent) et que vous la supprimez des deux divs sur lesquels elle se trouve, cela fonctionne pour moi. 

Vous pouvez également rechercher d'autres solutions en conservant "hideThisBox" sur l'étendue racine, en diffusant un événement en cliquant sur Enregistrer ou en le conservant dans un service.

10
kaesve

Même contrôleur, mais déclaré deux fois. donc - deux portées.
Normalement, la solution consiste à déplacer la déclaration du contrôleur ng d'un niveau dom supérieur (dans votre cas, dans l'élément body. Une fois uniquement), et de ne l'avoir qu'une fois. Sinon, examinez les services angulaires.

voir plunkr mis à jour: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview

16
oori

Vous devez apporter quelques modifications au contrôleur et à la vue.

var app = angular.module('plunker', []);

 app.controller('subCCtrl', function($scope) {
   $scope.hideThisBox = false;
   $scope.update = function(label) {

     if (label == 'Cost')
       $scope.displaybox = true;
     else
       $scope.displaybox = false;
   }
 });
 app.controller('subACtrl', function($scope) {

 });

 app.controller('subBCtrl', function($scope) {

 });

HTML:

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
      <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
    <script data-require="[email protected]" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"></script>
    <script src="app.js"></script>
  </head>

  <body>
            <div ng-controller="subCCtrl" class="row-fluid">

                <div class="span6">
                <a href="#" ng-click='update("Cost");displaybox=true;'>Cost</a>
                <br />
                <a href="#" ng-click='update("Savings");displaybox=fasle;'>Savings</a>
                <br />

                     </div>

            <hr />
            <div ng-controller="subACtrl">Do stuff that uses subACtrl</div>
            <div ng-controller="subBCtrl">Do stuff that uses subBCtrl</div>
            <hr />
            <div ng-controller="subCCtrl" class="row-fluid">
                <div class="span3">
                    <label>If click on 'Savings', hide below box: </label>
                </div>
                  <div ng-hide="hideThisBox" class="span6">
                    <input type="text" ng-model="test2" ng-show="displaybox"/>
                </div>          
            </div>
       </div>
  </body>

</html>
3
Muhammad Awais

Vous avez déjà reçu votre réponse, je suppose, mais pour ceux qui viendront après, voici quelques astuces ^^ (espérons que ça ira):

  • ng-controller="myCtrl" définira une nouvelle instance du contrôleur "myCtrl", avec sa propre portée  

  • La portée utilisée sera celle du contrôleur de la première div. Cela signifie que si vous avez quelque chose comme:

         <div id="maindiv" ng-controller="myCtrl>
                  <div id="subdiv1">
                      <div></div>
                      <div>
                          <div>some text</div>
                      </div>
                  </div>
                  <div id="subdiv2" ng-controller="myCtrl">
                      <div>
                          <span>-</span>
                          <span>so</span>
                          <span>this</span>
                          <span>is</span>
                          <span>a</span>
                          <span>subdiv</span>
                          <span>.</span>
                      </div>
                  </div>
              </div>
          </div>
  • Subdiv1 aura la même portée que maindiv
  • Mais Subdiv2 aura sa propre instance de la portée du contrôleur myCtrl .
  • De manière globale, la portée de Subdiv2 aurait dû être constituée des données de la portée de maindiv.

C’est juste quelques astuces simples et vous en trouverez d’autres plus utiles sur SO, ou google, mais de toute façon, si cela peut aider certains d’entre vous, ce sera cool.

0
xoxel

Je vous recommande de lire sur Javascript. Le problème avec votre code était la portée de ng-controllers.

0
Rudzani Mulaudzi