2016-10-04 14 views
0

ユーザーがシステムにログインする簡単なアプリケーションを作成しています。 ユーザーがログインすると、彼の名前がヘッダーに表示されます。私は単一ページのWebアプリケーションを作成しています。 私のサンプルWebページには、次のとおりです。コールバック関数でangularJSのデータバインディングが機能しない

<body ng-app="homePageApp" ng-controller="homeController"> 
     <div class="page-header" style="margin-left: 5%"> 
      <ui> 
       <header> 
        <div> 
         <li ng-hide="userDiv" ng-click="hideIt()"><a ui-sref="userPage">SignIn or Register</a></li> 
         <li><a>profile {{guest}}</a></li> 
        </div> 
       </header> 
      <hr> 
:::::: // too much code below 

マイangularjsがある:上記のコードで

var homePage = angular.module('homePageApp', [ 'ui.router' ]); 

homePage.config(function($stateProvider, $urlRouterProvider) { 
    $urlRouterProvider.otherwise('/'); 

    $stateProvider.state('/', { 
     url : '/', 
     templateUrl : '/templates/home.ejs' 
    }).state('home', { 
     url : '/home', 
     templateUrl : '/templates/home.ejs' 
    }).state('userPage', { 
     url : '/userPage', 
     templateUrl : './templates/userPage.ejs' 
    }).state('userPage.signin', { 
     url : '/signin', 
     templateUrl : './templates/signin.ejs', 
     controller : 'signinController' 
    }).state('userPage.register', { 
     url : '/register', 
     templateUrl : './templates/register.ejs', 
     controller : 'registerController' 
    }) 
}); 

homePage.controller 

homePage.controller('homeController', function($http, $state, $scope, 
     $rootScope, $log) { 
    $log.info($state.current); 

    $scope.hideIt = function() { 
     $scope.userDiv = true; 
    } 

    $scope.signinUser = function(user) { 
     $http({ 
      method : "POST", 
      url : "/signin", 
      data : user 
     }).then(function(res) { 
      if (res.data['status'] == 'success') { 
       $scope.guest = user.username; 
       $state.go('home', { 
        'user' : user.username 
       }); 
      } 
     }, function(err) { 
      $log.info("Something bad happenned"); 
     }); 
    } 

    // for register 
    $scope.registerUser = function(user) { 
     $http({ 
      method : "POST", 
      url : "/register", 
      data : user 
     }).then(function(res) { 
      $hhtp({ 
       url : '/home', 
       method : "POST", 
      }).then(function(response) { 
       $log.info('Something something'); 
      }) 

     }, function(err) { 
      $log.info("Something bad happenned"); 
     }); 
    } 
}) 

、私のhideIt()メソッドは動作しますが、私は成功したログインを持っている場合は、$ scope.guest = "yayayayyayay"は動作しません。

データバインド変数をコールバックメソッドで呼び出すことはできないのですか? 私は直面している問題に関連する何かを見つけませんでした。

$scope.$apply(); 
+0

のuはあなたの$の状態を何$ rootScope変数は$スコープ –

+0

のinstatedしようと試みています。行く?私はあなたのルートとコントローラを見なければならないと思います...更新した後であなたの範囲を再読み込みしていると思います。 –

+0

私は完全なJavaスクリプトファイルを追加しました –

答えて

0

$cope.guest = user.username;代わり$scope.guest = user.username;

0

あなたが書いた:あなたは(ちょうど$state.go前に)あなたの範囲を更新する必要があり

関連する問題