angularjs: not able to pass a variable value from controller to view

Question

(function() {

    angular
        .module('myApp.home', [])

        .factory('myService', function($http) {
            return {
                getInfo: function() {
                    // return something
                }
            };
        })

        .controller('HomeController', function($scope, $routeParams, myService) {
                var my = this;      
                var sid;

                myService.getInfo().success(function(data) {

                    my.id   = data.id;
                    //sid= my.id;
                });

                //my.id     = sid;
        });
})();

I'm trying to access the variable id in my view. But I'm not able to do so. I'm getting an undefined variable error.

I even tried to declare a variable sid globally so that it can be accessed from everywhere and I tried assigning value to it as well but that effort also didn't bring up any results.

My services are working fine and they are returning data. I'm trying to use the id in my view but don't know where I messed it up. Any help?

EDIT

And my HTML is like this:

<div data-id="my.id"></div>

where is vm.id in controller? It should rather by $scope.id = my.id and in html <div>{{id}}</div> — Rahul Arora
– Rahul Arora, Commented May 31, 2016 at 10:45
Did you declare controller like this ng-controller='HomeController as vm'? — Owen Hsieh
– Owen Hsieh, Commented May 31, 2016 at 10:54

Community · Accepted Answer · 2017-05-23 12:24:02Z

0

If you want to use it in your view you have to bind it to a scope e.g. $scope.id - check this link for reference.

edited May 23, 2017 at 12:24

CommunityBot

11 silver badge

answered May 31, 2016 at 10:37

SeRu

3141 silver badge6 bronze badges

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

4 Comments

version 2 Over a year ago

I tried this. Even when I use $scope, sometimes it works and most of time, it returns undefined. @SeRu

Rahul Arora Over a year ago

can you show the code where you are trying it with $scope?

Rahul Arora Over a year ago

AngularJS only binds that data to the template that is linked with $scope in the controller

SeRu Over a year ago

You dont call your controller in the html. try HomeController.id instead of vm.id

Thalaivar · Accepted Answer · 2016-05-31 10:50:17Z

0

Below is your html, how it should be.

<div ng-app="app" ng-controller="HomeController as home">
     <div data-id="home.id">{{home.id}}</div>
</div>

Below is how your controller part.

angular.module('app', [])

.controller('HomeController', function () {
    this.id = "someValue";    
});

http://jsfiddle.net/grdmLfxt/

answered May 31, 2016 at 10:50

Thalaivar

23.7k5 gold badges63 silver badges71 bronze badges

3 Comments

version 2 Over a year ago

Error: [$compile:multidir] Multiple directives [ngController, uibTabset (module: ui.bootstrap.tabs)] asking for new/isolated scope on: <div active="active" ng-controller="HomeController as vm"> @Thalaivar

Thalaivar Over a year ago

@AmeliaEarheart: very difficult to say from here, can you share your complete html part... and btw instead of vm.id you can also use $scope.id

version 2 Over a year ago

I haved added full html. @Thalaivar

Durgpal Singh · Accepted Answer · 2016-05-31 10:53:32Z

0

use controllerAs : vm then you can access vm.id in your view.

HTML

<div ng-app="app" ng-controller="HomeController as vm">
     <div data-id="vm.id">{{vm.id}}</div>
</div>

Controller

.controller('HomeController', function () {
    var vm = this;
    vm.id = "someValue";    
});

for more info read this

edited May 31, 2016 at 10:53

answered May 31, 2016 at 10:46

Durgpal Singh

12k4 gold badges40 silver badges50 bronze badges

Comments

Jacob Nelson · Accepted Answer · 2016-05-31 10:55:05Z

small change in javascript code and html. try this.

Javascript

(function() {

    angular
        .module('myApp.home', [])

        .factory('myService', function($http) {
            return {
                getInfo: function() {
                    // return something
                }
            };
        })

        .controller('HomeController', function($scope, $routeParams, myService) {
                var my = this;      
                var sid;

                myService.getInfo().success(function(data) {

                    $scope.id   = data.id;  // changed from my.id to $scope.id
                    //sid= my.id;
                });

                //my.id     = sid;
        });
})();

HTML

<div data-id="id"></div>

Collectives™ on Stack Overflow

angularjs: not able to pass a variable value from controller to view

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related