Блог

Главная - Вопросы по программированию - привязка данных в AngularJS не работает в функции обратного вызова

привязка данных в AngularJS не работает в функции обратного вызова

#javascript #angularjs

#javascript #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 = «yayayayyayayay» не работает.

Похоже ли это на то, что мы не можем вызывать переменные привязки данных в методе обратного вызова? Я не нашел ничего, относящегося к проблеме, с которой я столкнулся.

Комментарии:

1. Установлена ли в переменной $rootScope переменная $scope

2. Что делает ваш $state.go ? Я думаю, нам нужно увидеть ваши маршруты и контроллеры… Я почти уверен, что вы перезагружаете свою область после ее обновления.

3. Я добавил полный файл Java script

Ответ №1:

Вам необходимо обновить область видимости (непосредственно перед $state.go этим) :

 $scope.$apply();

Ответ №2:

вы пишете: $cope.guest = user.username; вместо $scope.guest = user.username;