angularjs view does not update after $http

Question

edit: I'm using bootstrap, I think bootstrap tab is causing the problem

View does not get updated after $scope variable update.

$scope.codeData

if i console the $scope.codeData, i can see the data, but does not render in view.

I have to click twice to get the view render correctly.

is there anything wrong with my code??

Thank you.

config

angular.module('SPAroutes', ['ngRoute', 'SPAcontrollers',  'SPAdirectives'])

.config(['$routeProvider', '$locationProvider',
function($routeProvider, $locationProvider) {
    $routeProvider
    .when('/admin', {
        templateUrl: 'templates/views/admin.html',
        controller: 'adminCtrl',
        controllerAs: 'admin'
    })
    $locationProvider.html5Mode(true).hashPrefix('!');
}]);

Controller.js

angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories',   'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window,  $SPAaccount) {
    this.dataRetrive = function(category){
        $http.get('/ctrls/get/blockCode/header').then(function (res){
            $scope.codeData = res.data;
            console.log($scope.codeData);
            $('#headerTab').tab('show');
        }, function (err){
            console.log(err);
        })
    };
}]);

admin.html

{{codeData}}

$scope.$apply() will do the job. But it shouldn't be needed. — atinder
– atinder, Commented Mar 29, 2016 at 3:32
When / where are you calling dataRetrieve()? Also, you appear to be mixing $scope with controllerAs which typically isn't what you want — Phil
– Phil, Commented Mar 29, 2016 at 3:33
Your $scope.codeData is in $http.get method. That is why it's not updating view. Assign the value of $scope.codeData outside $http.get, it should work. — Khalid Hussain
– Khalid Hussain, Commented Mar 29, 2016 at 3:34
Changing the DOM from within a controller is also a bad idea. That's what directives are for — Phil
– Phil, Commented Mar 29, 2016 at 3:35

Community · Accepted Answer · 2017-05-23 12:00:42Z

1

You are mixing up controllerAs with scope as phil mentioned in his comment on question. Instead of using scope here store values insidethis reference something like this.

angular.module('SPAcontrollers', ['ngRoute', 'SPAfactories',   'SPAdirectives']).controller('adminCtrl', ['$scope', '$http', '$location', '$window', '$SPAaccount', function ($scope, $http, $location, $window,  $SPAaccount) {
    var admin = this;
    this.dataRetrive = function(category){
        $http.get('/ctrls/get/blockCode/header').then(function (res){
            admin.codeData = res.data;
            console.log(admin.codeData);
            $('#headerTab').tab('show');
        }, function (err){
            console.log(err);
        })
    };
}]);

and inside the view: admin.html

{{admin.codeData}}

here is working plunk for your refernce

edited May 23, 2017 at 12:00

CommunityBot

11 silver badge

answered Mar 29, 2016 at 4:15

Jenish Rabadiya

6,7766 gold badges35 silver badges62 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

angularjs view does not update after $http

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related