AngularJS variable not showing in html

Question

Structure

statsController.js

(function (module) {
    'use strict';

    var statsController = function ($scope, $rootScope, $timeout, $routeParams, $location, $window, statsService) {
        $scope.$on('$viewContentLoaded', function (event) {
            $window.ga('send', 'pageview', { page: $location.url() });
        });

        var model = {};
        model.stats = {};

        statsService.getStats().then(function (d) {
            model.stats = d;
        });
    };

    module.controller("statsController", statsController);

}(angular.module("app")));

statsService.js

(function (app) {

    var statsService = function (webapi) {

        var model = {};

        model.getStats = function () {
            return webapi.get('stats/getstats');
        }

        return model;
    };

    app.factory("statsService", statsService);
    statsService.$inject = ['webapi'];

}(angular.module("app")))

stats.html

Total paid customers: {{statsController.model.totalPaidCustomers}}<br/>
Stripe confirmed customers: {{statsController.model.stripeConfirmedCustomers}}<br />

Result from API:

{"totalPaidCustomers":1,"stripeConfirmedCustomers":2}

When I put alert() in statsController.js for d.totalPaidCustomers I get value 1, same for other parameter.

So only problem is to show this in html.

App.js

.when('/stats', {
            templateUrl: 'tpl/admin/stats.html',
            controller: 'statsController',
            controllerAs: 'stats'
          }).

your model isn't on $scope in the statsController.

Bennett Adams
– Bennett Adams

2016-02-19 13:15:57 +00:00
Commented Feb 19, 2016 at 13:15 — Bennett Adams
– Bennett Adams, Commented Feb 19, 2016 at 13:15
Are you using ui-router?

BBauer42
– BBauer42

2016-02-19 13:30:04 +00:00
Commented Feb 19, 2016 at 13:30 — BBauer42
– BBauer42, Commented Feb 19, 2016 at 13:30

ahmetugurbulut · Accepted Answer · 2016-02-19 13:04:02Z

1

If i understand correctly. It should be "model.stats"

Total paid customers: {{statsController.model.totalPaidCustomers}}

http://jsfiddle.net/f5hb9spz/8/

answered Feb 19, 2016 at 13:04

ahmetugurbulut

1,60911 silver badges25 bronze badges

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

Comments

BBauer42 · Accepted Answer · 2016-02-19 13:33:19Z

Try changing your state definition to this:

.when('/stats', {
    templateUrl: 'tpl/admin/stats.html',
    controller: 'statsController',
    controllerAs: 'vm'
}).

Then change the controller to this:

(function (module) {
    'use strict';

    var statsController = function ($scope, $rootScope, $timeout, $routeParams, $location, $window, statsService) {
        $scope.$on('$viewContentLoaded', function (event) {
            $window.ga('send', 'pageview', { page: $location.url() });
        });
        var vm = this;
        vm.model = {};
        vm.model.stats = {};

        statsService.getStats().then(function (d) {
            vm.model.stats = d;
        });
    };

    module.controller("statsController", statsController);

}(angular.module("app")));

Finally your view goes to this:

Total paid customers: {{vm.model.stats.totalPaidCustomers}}<br/>
Stripe confirmed customers: {{vm.model.stats.stripeConfirmedCustomers}}<br />

If you don't see anything then just put this in the view and see what you have:

{{ vm | json }}

Nothing shows in html, I've updated my question with App.js routing settings. This is from console.log for model.stats Object { totalPaidCustomers=1, stripeConfirmedCustomers=2}
You put ALL of those bindings in and see nothing? I updated the answer to include a few more things.
I have this in console.log Object { totalPaidCustomers=1, stripeConfirmedCustomers=2} for model.stats and this is html inspect: puu.sh/ndCHc/cad2ecfb4f.png
for some reason it doesn't show anything in html. it's breaking my brain
Can you reproduce in a fiddle or plunker? Do you see any other random errors in your browser's dev tools console log?

sensei · Accepted Answer · 2016-02-19 16:24:27Z

Problem was I didn't assign the current scope to a model.

var model = this;

statsController.js

(function (module) {
    'use strict';

    var statsController = function ($scope, $rootScope, $timeout, $routeParams, $location, $window, statsService) {
        $scope.$on('$viewContentLoaded', function (event) {
            $window.ga('send', 'pageview', { page: $location.url() });
        });

        var model = this;
        model.stats = {};

        statsService.getStats().then(function (d) {
            model.stats = d;
        });
    };

    module.controller("statsController", statsController);

}(angular.module("app")));

Then call in html:

Total paid customers: {{stats.stats.totalPaidCustomers}}<br/>
Stripe confirmed customers: {{stats.stats.stripeConfirmedCustomers}}<br />

have to change name of var though(stats.stats), confused the hell out of me.

Collectives™ on Stack Overflow

AngularJS variable not showing in html

3 Answers 3

Comments

5 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

5 Comments

Comments

Related