2016-11-04 3 views
2

Ich bin neu in diesem Feld und möchte eine App schreiben, jetzt triff ich einige Probleme. Hier ist eine einfache Version von meinem Code, was ich möchte, ist die API nur zeigen signUp zuerst. Nachdem ich signUp drücken und drücken Sie die Taste submit sollte nur signoutWie man den Wert eines Dienstes von einem Controller einstellt und den Wert eines anderen Controllers mit diesem Dienst aktualisiert

Ich glaube, meine Art und Weise gezeigt, nicht alles in Ordnung ist, denn nachdem ich den Wert in Dienst zu ändern, kann ein anderer Controller nicht seinen Wert aktualisieren. Kannst du mir das sagen? bitte verwenden Sie this.logged wenn möglich, danke!

Der Prozess ist nicht notwendig, um mit meinem Titel identisch zu sein. OK, wenn es meine Funktion implementieren kann.

https://plnkr.co/edit/1ptaVzmD7EwPZ6dU23gR?p=preview

(function(){ 
    angular.module('myApp',['myApp.dashboard','myApp.value','myApp.signUp']); 
})(); 

(function(){ 
    angular.module('myApp.dashboard',[]); 
})(); 

(function(){ 
    angular.module('myApp.value',[]); 
})(); 

(function(){ 
    angular.module('myApp.signUp',[]); 
})(); 

(function(){ 
    'use strict'; 
    angular.module('myApp.dashboard').controller('mainControl',mainControl); 

    mainControl.$inject = ['whichToShow']; 
    function mainControl(whichToShow){ 
     this.logged=whichToShow.getVar(); 
     alert(this.logged); 
    } 
})(); 



(function(){ 
    'use strict'; 
    angular.module('myApp.value').factory('whichToShow',function(){ 
     alert("running2"); 
     var logged=false; 
     return { 
      getVar: function(){ 
       return logged; 
      }, 
      setVar: function(value){ 
       logged=value; 
      } 

     }; 
    }); 
})(); 

(function(){ 
    'use strict'; 
    angular.module('myApp.signUp').controller('signUpControl',signUpControl); 
    signUpControl.$inject = ['whichToShow']; 
    function signUpControl(whichToShow){ 
     alert("haha"); 
     this.logIn=function(){ 
      whichToShow.setVar(true); 
      alert("running set!"); 
     }; 
    }; 
})(); 

Teil html:

<body ng-controller="mainControl as mc"> 
    <div> 
     <div ng-hide="mc.logged"> 
       <button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button> 
      </div> 
      <div ng-show="mc.logged"> 
       <button>Sign Out</button> 
      </div> 
     </div> 


     <div class="signUp modal fade" id="signUp" ng-controller='signUpControl as sc'> 
      <div class="modal-dialog"> 
       <div class="modal-content"> 
        <div class="modal-header"> 
         <h4 class="modal-title">sigh up</h4> 
         <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button> 
        </div> 
        <div class="modal-body"> 
         <form id="signUpForm" name="signUpForm" ng-submit="sc.logIn()"> 
          <label for="email"> 
           <span>email:</span> 
           <input type="email" name="email"> 
          </label> 
          <button class="submit" id="signUpSubmit" type="submit" value="signUp">submit</button> 
         </form>     
        </div> 
        <div class="modal-footer"> 

        </div> 
       </div> 
      </div> 
     </div> 

    </body> 

Antwort

0

Sie eine Variable global oder in Ihrem rootcontroller setzen können, lässt sagt isLoggedIn

jetzt mit einem Service, den Sie diese Variable auf signingIn

und verwenden Sie es so {

} <span data-ng-if="!isLoggedIn">Sign In</span> <span data-ng-if="isLoggedIn">Sign Out</span>

1

Sie müssen für die Änderungen an dem angemeldeten Wert aus dem Dienst beobachten.

Das ist alles was Sie tun müssen.

(function() { 
 
    angular.module('myApp', ['myApp.dashboard', 'myApp.value', 'myApp.signUp']); 
 
})(); 
 

 
(function() { 
 
    angular.module('myApp.dashboard', []); 
 
})(); 
 

 
(function() { 
 
    angular.module('myApp.value', []); 
 
})(); 
 

 
(function() { 
 
    angular.module('myApp.signUp', []); 
 
})(); 
 

 
(function() { 
 
    'use strict'; 
 
    angular.module('myApp.dashboard').controller('mainControl', mainControl); 
 

 
    mainControl.$inject = ['$scope', 'whichToShow']; 
 

 
    function mainControl($scope, whichToShow) { 
 
    $scope.$watch(() => whichToShow.getVar(), (newValue, oldValue) => this.logged = newValue) 
 
    } 
 
})(); 
 

 
(function() { 
 
    'use strict'; 
 
    angular.module('myApp.value').factory('whichToShow', function() { 
 

 
    var logged = false; 
 
    var service = {}; 
 

 
    return { 
 
     getVar: function() { 
 
     return logged; 
 
     }, 
 
     setVar: function(value) { 
 
     logged = value; 
 
     } 
 

 
    } 
 
    }); 
 
})(); 
 

 
(function() { 
 
    'use strict'; 
 
    angular.module('myApp.signUp').controller('signUpControl', signUpControl); 
 
    signUpControl.$inject = ['whichToShow']; 
 

 
    function signUpControl(whichToShow) { 
 
    this.logIn = function() { 
 
     whichToShow.setVar(true); 
 
    }; 
 
    }; 
 
})();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 
 

 
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.8/angular.min.js"></script> 
 

 

 
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<div ng-app="myApp"> 
 
    <div ng-controller="mainControl as mc"> 
 
    <div> 
 
     <div ng-hide="mc.logged"> 
 

 
     <button type="button" class="btn" data-toggle="modal" data-target=".signUp">Sign Up</button> 
 
     </div> 
 
     <div ng-show="mc.logged"> 
 
     <button>Sign Out</button> 
 
     </div> 
 
    </div> 
 

 

 
    <div class="signUp modal fade" id="signUp" ng-controller='signUpControl as sc'> 
 
     <div class="modal-dialog"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
      <h4 class="modal-title">sigh up</h4> 
 
      <button type="button" class="close" data-dismiss="modal" aria-label="Close">&times;</button> 
 
      </div> 
 
      <div class="modal-body"> 
 
      <form id="signUpForm" name="signUpForm" ng-submit="sc.logIn()"> 
 
       <label for="email"> 
 
       <span>email:</span> 
 
       <input type="email" name="email"> 
 
       </label> 
 
       <button class="submit" id="signUpSubmit" type="submit" value="signUp">submit</button> 
 
      </form> 
 

 

 
      </div> 
 
      <div class="modal-footer"> 
 

 
      </div> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

Arbeitslösung auf Codepen

1

Grundsätzlich sind Sie Werte in Factory-Objekt nach Benutzer klickt Einstellung auf einreichen aber das spiegelt nicht in UI, wie Sie den Umfang Objekt aktualisiert haben this.logged .So zu sagen, Hauptcontroller vonSign Controller, die den this.logged $scope Wert ändern können wir $emit oder $broadcast

verwenden

Abgesehen von $watch Ansatz können Sie sogar $broadcast verwenden, um dies zu erreichen.

Arbeiten DEMO

Genau dies in Ihrer JS-Datei Controller unter Code hinzufügen

signUpControl

(function(){ 
    'use strict'; 
    angular.module('myApp.signUp').controller('signUpControl',signUpControl); 
    signUpControl.$inject = ['whichToShow','$rootScope']; 
    function signUpControl(whichToShow,$rootScope){ 
     alert("haha"); 
     this.logIn=function(){ 
      whichToShow.setVar(true); 
      $rootScope.$broadcast('login');//broadcasting that user has logged in 
      //alert("running set!"); 
     }; 
    }; 
}) 

Maincontrol

(function(){ 
    'use strict'; 
    angular.module('myApp.dashboard').controller('mainControl',mainControl); 

    mainControl.$inject = ['whichToShow','$rootScope']; 

    function mainControl(whichToShow,$rootScope){ 
     var mc = this; 
     mc.main ={}; 
     mc.main.logged=whichToShow.getVar(); 
     alert(mc.main.logged); 

     // below code will listen to the broadcast and do the necessary process.. 
     $rootScope.$on('login',function(event,args){ 
       mc.main.logged=whichToShow.getVar(); 
     }); 
    } 
}) 
1

Sie versuchen immer noch hier, den Wert von Grundelementen und nicht Objekteigenschaften festzulegen.In JavaScript sind Primitiven byValue bestanden, nicht durch Bezugnahme, so wird whichToShow.getVar();true oder false anstatt Rückkehr einen Verweis auf logged zurück. Daher sehen Sie keine Änderungen an logged, es sei denn, Sie rufen erneut .getVar(), um den neuen Wert zu erhalten. Aus diesem Grund haben die meisten Antworten, die Sie bisher gesehen haben, eine Form von $watch, $broadcast oder ähnlichem, um Ihre mc zu warnen, dass sie erneut nach dem aktuellen Wert der Variablen logged fragen sollte.

Wenn Sie eine $watch vermeiden möchten, sollten Sie ein Objekt anstelle eines Primitivs verwenden. Wenn Sie ein Objekt verwenden, können Sie das Objekt byReference übergeben, wodurch angular die Änderungen an den Eigenschaften anzeigen kann, wenn eine Referenzgruppe vorhanden ist.

In Ihrem Werk, gibt ein Objekt:

(function() { 
    'use strict'; 
    angular.module('myApp.value').factory('whichToShow', function() { 
    alert("running2"); 
    var status = { 
     logged: false 
    }; 
    var logged = false; 
    return { 
     getVar: function() { 
     return status; 
     }, 
     setVar: function(value) { 
     status.logged = value; 
     } 

    }; 
    }); 
})(); 

In Maincontrol, eine Referenz auf dieses Objekt:

(function() { 
    'use strict'; 
    angular.module('myApp.value').factory('whichToShow', function() { 
    alert("running2"); 
    var status = { 
     logged: false 
    }; 
    return { 
     getVar: function() { 
     return status; 
     }, 
     setVar: function(value) { 
     status.logged = value; 
     } 

    }; 
    }); 
})(); 

Und schließlich verwenden die Objekteigenschaft im HTML:

<div ng-hide="mc.status.logged"> 
... 
<div ng-show="mc.status.logged"> 
... 

https://plnkr.co/edit/Pindt2LYxDxyk8C5Axp1?p=preview

Ich könnte sogar noch einen Schritt weiter gehen und das Objekt direkt vom Dienst zurückgeben und die getVar und setVar Funktionen überspringen.

Verwandte Themen