it-swarm.com.de

mehrere Controller auf einer Seite

Ich habe eine Seite mit mehreren Controllern. Einer der Controller wird in 2 verschiedenen Divs auf derselben Seite verwendet. Ich bin nicht sicher, ob es sich um ein Problem mit dem Gültigkeitsbereich handelt oder dass mir etwas in meinem Code fehlt.

hier ist der plunkr http://plnkr.co/edit/IowesXE3ag6xOYfB6KrN?p=preview

Ich möchte das Textfeld ausblenden, wenn der Benutzer auf den Link "Einsparungen" klickt. Das Feld wird angezeigt, wenn Sie auf den Link "Kosten" klicken.

19
Annie C

Bei jeder Verwendung von ng-controller erstellen Sie eine neue Instanz des Controllers mit eigenem Geltungsbereich. Wenn Sie subCCtrl für das body-Tag (oder ein neues übergeordnetes Element) festlegen und es aus den beiden Divs entfernen, in denen es sich derzeit befindet, funktioniert es für mich. 

Andere Lösungen, in denen Sie nachsehen möchten, bestehen darin, "hideThisBox" im Hauptbereich zu behalten, ein Ereignis zu senden, wenn Sie auf "Speichern" klicken, oder indem Sie es in einem Dienst speichern.

10
kaesve

Gleicher Controller, aber zweimal deklariert. dafür - zwei bereiche.
Normalerweise besteht die Lösung darin, die ng-controller-Deklaration um eine dom-Ebene höher zu verschieben (in Ihrem Fall nur zum body-Element. Einmal)} und nur einmal. Ansonsten schauen Sie sich die eckigen Dienste an.

siehe aktualisierter Plan: http://plnkr.co/edit/pWnx2mdMeOeH33LUeTGm?p=preview

16
oori

Sie müssen einige Änderungen an Controller und View vornehmen.

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

Sie haben Ihre Antwort schon bekommen, aber für diejenigen, die als nächstes kommen werden, gibt es ein paar Tipps ^^ (hoffe, es wird hepen):

  • ng-controller="myCtrl" setzt eine neue Instanz des "myCtrl" -Controllers mit i'ts eigenem Bereich 

  • Der verwendete Bereich wird der Controller des Firt-Divs sein. Wenn Sie so etwas wie Folgendes haben:

         <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 hat den gleichen Geltungsbereich wie maindiv
  • Subdiv2 hat jedoch eine eigene Instanz des myCtrl -Controllers.
  • Auf eine globale Weise hätte der Umfang von Subdiv2 die Daten des Bereichs von maindiv hätte beeinträchtigen sollen.

Das sind nur ein paar einfache Tipps und Sie werden weitere nützliche auf SO oder google finden, aber trotzdem, wenn es einigen von Ihnen helfen kann, wird es cool sein.

0
xoxel

Ich würde empfehlen, dass Sie sich über den Umfang von Javascript informieren. Das Problem mit Ihrem Code war der Geltungsbereich von ng-controllers.

0