ユーザーがシステムにログインする簡単なアプリケーションを作成しています。 ユーザーがログインすると、彼の名前がヘッダーに表示されます。私は単一ページの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();
のuはあなたの$の状態を何$ rootScope変数は$スコープ –
のinstatedしようと試みています。行く?私はあなたのルートとコントローラを見なければならないと思います...更新した後であなたの範囲を再読み込みしていると思います。 –
私は完全なJavaスクリプトファイルを追加しました –