angularJS-從控制器發起HTTP調用失敗

我正在使用angularJS和PHP構建一個網站。網站有很多網頁喜歡 - 主頁，關於我們等angularJS-從控制器發起HTTP調用失敗

所以，我創造了我列入這樣我的HTML視圖網站常見的標題：

<!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>

和標題（header.html）網頁看起來是這樣的：

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

和頭控制器具有一個HTTP調用其獲取用戶ID和我試圖顯示此ID作爲標籤上面（commonController.js）

0123中提到的環節之一

(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; 
      }); 
     }); 
})();

但是，當我瀏覽頁面時，標題保持不變。所以，我無法啓動該http呼叫。我的網站上有很多頁面。

可以這樣做嗎？我對這個平臺非常陌生。

路線（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：我排除了其他頁面，降低複雜性，並讓我的查詢很容易理解。

謝謝！

來源

2016-10-13 John Doe

我用'UI-router'它提供了更多的功能比'routeProvider '和你的問題可以很容易解決。這不是您的解決方案，但我認爲它可以幫助您。 – Sajan

你爲什麼要在文件中執行'（function（）{}）（）'？ – Chrillewoodz

對此不瞭解。這是錯的嗎？ @Chrillewoodz –

在我看來，所有這一切都缺少的是讓模板知道作用域別名控制器

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

和header.html

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

注意事項，我用common而不是vm，因爲您的一些路線使用vm，最好避免衝突。

如果要觸發頁面導航（即，路線的變化）的更新，改變你的CommonController這個

.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); 
});

來源

2016-10-17 05:20:21 Phil

yeah.it顯示值，但http調用getBasicUserInfo（）僅在第一次啓動時（當我加載網站時）。之後當我在頁面之間導航時，它不會被調用。想象一下，變量的值會發生變化（比如通知計數或其他），所以每次@Phil –

都必須檢查此調用，以便在發出新通知時變量值得到更新。所以，我必須在每個頁面上檢查這個電話......這是我無法做到的，因爲所有頁面的標題都保持不變。 @Phil –

@SajeevC什麼應該是更新通知的觸發器？您可以使用'$ interval'自動輪詢，或者您可以手動更新某些事件。它應該是什麼？ – Phil

你應該能夠做到這一點：

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

而不是從控制器得到它

來源

2016-10-13 13:24:17 Fehintola

這不起作用。已經嘗試過。 @Fehintola –

我認爲你的問題可能是，包括無法讀取控制器，所以不是嘗試這樣的：

<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>

注意，你還缺少controllerAs語法，所以我補充說。

，並刪除ng-controller從這裏：

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

來源

2016-10-17 05:15:47 Chrillewoodz

'ng-include'將模板與當前範圍編譯在一起，所以問題肯定與您的第一點無關 – Phil

@Phil不確定，因爲我以前遇到過這個問題。我會看看我是否可以挖掘我的舊問題。 – Chrillewoodz

angularJS-從控制器發起HTTP調用失敗

回答

相關問題