angularJS- initiate HTTP Aufruf von einem Controller fehlgeschlagen

Ich baue eine Website mit angularJS und PHP. Website hat viele Seiten wie-Startseite, über sie usw.angularJS- initiate HTTP Aufruf von einem Controller fehlgeschlagen

Also, ich habe einen gemeinsamen Header für die Website erstellt, die ich in meiner HTML-Ansicht wie folgt enthalten:

<!DOCTYPE html> 
<html ng-app="myApp"> 
    <head> 
     <meta charset="UTF-8"> 
     <meta name="viewport" content="width=device-width, initial-scale=1"> 
     <title>Demo</title> 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script> 
     <script src="angular.min.js"></script> 
     <script src="angular-route.min.js"></script> 
     <script src="commonController.js"></script> 
     <script src="homeController.js"></script> 
     <script src="loginController.js"></script> 

     <script src="app.js"></script> 

    </head> 
    <body> 
     <div class="header" ng-controller="CommonController" 
      ng-include="'header.html'"></div> 
     <div class="main" ng-view></div> 
    </body> 
</html>

und der Header (header.html) Seite sieht wie folgt aus:

<nav class="navbar-inverse navbar-fixed-top" role="navigation"> 
    <a href="#/home">Home</a> 
    <a href="#/notifications" >{{vm.commonId}}</a> 
</nav>

und Header-Controller verfügt über einen hTTP-Aufruf, die Benutzer-ID holt und ich versuche, diese ID als Etikett zu zeigen, für einen der Links oben genannten (commonController.js)

(function() { 

    angular 
     .module('myApp.common', ['ngRoute']) 

     .factory('myCommonService', function($http) { 
      var baseUrl = 'api/'; 
      return { 
       getBasicUserInfo:function() { 
        return $http.get(baseUrl + 'getBasicUserInformation'); 
       } 
      }; 
     }) 

     .controller('CommonController', function($scope, $routeParams, myCommonService) { 
      var vm = this;  
      myCommonService.getBasicUserInfo().success(function(data) { 
       vm.commonId = data.id; 
      }); 
     }); 
})();

Aber wenn ich durch Seiten navigiere, bleibt Header gleich. Also kann ich diesen http-Aufruf nicht initiieren. Es gibt viele Seiten auf meiner Website.

Kann dies getan werden? Ich bin ziemlich neu in dieser Plattform.

Strecke (app.js)

(function() { 

    angular.module('myApp', [ 
     'ngRoute', 
     'myApp.login', 
     'myApp.home', 
     'myApp.common' 
    ]) 
    .config(['$routeProvider', function($routeProvider) { 
     $routeProvider 
     .when('/login', { 
      controller: 'LoginController', 
      templateUrl: 'loginView.html',  
      controllerAs: 'vm' 
     }) 
     .when('/home', { 
      controller: 'HomeController', 
      templateUrl: 'homeView.html',  
      controllerAs: 'vm'   
     }) 
     .otherwise({ 
      redirectTo: '/login' 
     }); 
    }]); 
})();

P. S: Ich andere Seiten ausgeschlossen Komplexität zu reduzieren und meine Abfrage leicht verständlich machen.

Danke!

Quelle

2016-10-13 John Doe

Ich benutze 'ui-router', die viele weitere Funktion bietet als' routeProvider 'und Ihr Problem kann leicht gelöst werden.Das ist keine Lösung für dich, aber ich dachte, es könnte dir helfen. – Sajan

Warum machst du '(function() {})()' in deinen Dateien? – Chrillewoodz

Neu zu diesem. Ist es falsch? @Chrillewoodz –

Scheint mir alles, was die Vorlage fehlt, ist informierend, die scoped alias für den Controller

<div class="header" ng-controller="CommonController as common" 
    ng-include="'header.html'"></div>

und in header.html

<a href="#/notifications">{{common.commonId}}</a>

Hinweis, dass ich common anstelle von vm verwendet habe, da einige Ihrer Routen vm verwenden und es am besten ist, Konflikte zu vermeiden.

Wenn Sie ein Update auf die Seitennavigation (dh Route ändern) auslösen wollen, ändern Sie Ihre CommonController zu diesem

.controller('CommonController', function($scope, myCommonService) { 
    var ctrl = this; 
    var update = function() { 
     myCommonService.getBasicUserInfo().then(function(res) { 
      ctrl.commonId = res.data.id; 
     }); 
    }; 
    update(); 

    $scope.$on('$routeChangeSuccess', update); 
});

Quelle

2016-10-17 05:20:21 Phil

yeah.it zeigt den Wert, aber der http-Aufruf getBasicUserInfo() wird nur zum ersten Mal initiiert (wenn ich die Website lade). Wenn ich später zwischen Seiten navigiere, wird es nicht aufgerufen. Denke wie, der Wert der Variablen ändert sich (wie Benachrichtigungszähler oder etwas), also muss ich diesen Aufruf jedes Mal überprüfen @Phil –

, also wenn eine neue Benachrichtigung kommt, wird der Variablenwert aktualisiert. Also muss ich diesen Aufruf auf jeder Seite überprüfen ... was ich nicht kann, da der Header für alle Seiten gleich bleibt. @Phil –

@SajeevC Was sollte der Auslöser für die Aktualisierung der Benachrichtigung sein? Sie können automatisch mit '$ interval' abfragen oder Sie können bei bestimmten Ereignissen manuell aktualisieren. Was sollte es sein? – Phil

Sie sollten in der Lage sein, dies zu tun:

.when('/login', { 
     controller: 'LoginController', 
     templateUrl: 'loginView.html', 
     resolve: function(){ //your code here } 
     controllerAs: 'vm' 
    })

statt es von der Steuerung immer

Quelle

2016-10-13 13:24:17 Fehintola

Dies wird nicht funktionieren. Schon versucht. @Fehtola –

Ich denke, dass Ihr Problem sein könnte, dass das einschließen kann den Controller nicht gelesen, so stattdessen versuchen, dies:

<nav class="navbar-inverse navbar-fixed-top" role="navigation" ng-controller="CommonController as vm"> 
    <a href="#/home">Home</a> 
    <a href="#/notifications" >{{vm.commonId}}</a> 
</nav>

Beachten Sie, dass Sie auch die controllerAs Syntax fehlt, so habe ich das.

Und entfernen ng-controller von hier:

<div class="header" ng-include="'header.html'"></div>

Quelle

2016-10-17 05:15:47 Chrillewoodz

'ng-include' kompiliert die Vorlage mit dem aktuellen Umfang, damit das Problem definitiv nicht mit deinem ersten Punkt zu tun hat. – Phil

@Phil Bin mir nicht sicher, weil ich Probleme damit hatte. Ich werde sehen, ob ich meine alte Frage darüber ausgraben kann. – Chrillewoodz

angularJS- initiate HTTP Aufruf von einem Controller fehlgeschlagen

Antwort

Verwandte Themen