2016-10-13 7 views
3

私はangularJSとPHPを使用してウェブサイトを構築しています。angularJS-コントローラからのHTTPコールの開始に失敗しました

<!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):ウェブサイトは、多くのページlike-ホーム、会社案内などだから、

を持って、私はこのように私のHTMLビューに含まれるウェブサイトのための共通のヘッダを作成しましたページには、次のようになります。

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

とヘッダコントローラは、ユーザIDを取得し、私は上記のリンクのいずれかのラベルとしてこのIDを表示しようとしています。httpコール(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:私は複雑さを軽減し、理解することが私のクエリは簡単にするために他のページを除外しました。

ありがとうございます!

+0

に変更、ページナビゲーション(すなわち、ルート変更)の更新をトリガしたい場合あなたの問題は簡単に解決できます。これはあなたのための解決策ではありませんが、私はそれがあなたを助けるかもしれないと考えました。 – Sajan

+0

ファイル内で '(function(){})()'をやっているのはなぜですか? – Chrillewoodz

+0

これは初めてです。違いますか? @Chrillewoodz –

答えて

1

が欠落しているすべてのテンプレートがコントローラ

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

header.html

<a href="#/notifications">{{common.commonId}}</a> 
で用スコープのエイリアスを知らせているように思えます

私はvmを使用しているので、vmの代わりにcommonを使用していますが、競合を回避することをお勧めします。


あなたのCommonController私は `routeProvider`よりも多くの機能を提供していますUI-router`を使用して、この

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

yeah.itは値を表示しますが、http呼び出しgetBasicUserInfo()は初めて(Webサイトをロードするとき)のみ開始されます。その後、ページ間を移動すると、呼び出されません。変数の値が(通知回数など)変更されるので、毎回@Phil –

+0

というようにこの呼び出しをチェックする必要があるので、新しい通知が来ると変数値が更新されます。だから、私はすべてのページでこのコールをチェックする必要があります...ヘッダーはすべてのページで同じままですができません。 @Phil –

+0

@SajeevC通知を更新するためのトリガは何でしょうか? '$ interval'を使って自動的にポーリングするか、特定のイベントがあれば手動で更新することができます。それはどれでしょうか? – Phil

0

あなたはこれを行うことができるようになります。

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

ではなく、私はあなたの問題が含まれていることかもしれないと思いコントローラ

+1

これは動作しません。既に試しました。 @Fehintola –

0

からそれを得るためのコントローラを読み取ることができないので、代わりにしてみてくださいこれは:

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

'ng-include'はテンプレートを現在のスコープでコンパイルするので、問題は最初のポイントとはまったく関係ありません。 – Phil

+0

@Philこれについてはこれまでに問題があったので分かりません。私はそれについての私の古い質問を掘り起こすことができるかどうか私は見るつもりです。 – Chrillewoodz

関連する問題