AngularJS variables not resolving/displaying

Question

Here is the relevant HTML:

<!DOCTYPE html>
<html ng-app="wpApp">

<body>
<div ng-controller="controllerMain as main">
    <div class="collapse navbar-collapse">
        <ul class="nav navbar-nav navbar-left">
            <li><a href="#">Link 1</a></li>
            <li><a href="#two">Link 2</a></li>
            <li><a href="#three">Link 3</a></li>
        </ul>
    </div>

    <!-- Start of View State -->
    <div class="page-content" style="padding-left:10px; padding-right:10px">
        <div ng-view></div>
    </div>
    <!-- End of View State -->

    <div class="footer">
        <div class="banner">
            {{main.message}}    
        </div>
    </div>
</div>
</body>
</html>

And here is the relevant Javascript

wpApp = angular.module("wpApp", ["ngRoute", "ngAnimate", "ui.bootstrap", "angularFileUpload"]);

wpApp.config(function($routeProvider) {
  return $routeProvider.when("/", {
    templateUrl: "one.html",
    controller: "controllerOne"
  }).when("/two", {
    templateUrl: "two.html",
    controller: "controllerTwo"
  }).when("/three", {
    templateUrl: "three.html",
    controller: "controllerThree"
  });
});

wpApp.controller("controllerMain", function() {
  this.ready = 'true';
  this.message = "This is the Main Controller";
  });
});

Now, with everything set up exactly as it is above (with some additional controllers for the other pages and all), controllerMain's message is properly displayed: "This is the Main Controller" in the specified spot within the HTML.

Now, I need an $http call to be made in controllerMain, so I change it like so:

wpApp.controller("controllerMain", function($http) {
  this.ready = 'true';
  this.message = "This is the Main Controller";
  return $http.get("config.json").success(function(data) {
    console.log("Here");
  });
});

When this happens, I can see "Here" in the log, but nothing is displayed where "{{main.message}}" should be displayed. A little debugging has shown me that basically if the $http GET call is made, nothing is displayed. If I remove the call, the message displays.

What is the problem here? Is it something with the way the program is configured? Am I not understanding something about the way controllers work?

Raphael Müller · Accepted Answer · 2014-07-21 18:29:27Z

1

please try to remove the return you don'e need to return anything from the controller

wpApp.controller("controllerMain", function($scope, $http) {
  $scope.ready = 'true';
  $scope.message = "This is the Main Controller";
  $http.get("config.json").success(function(data) {
    console.log("Here");
  });
});

I also suggest to use $scope.message = "This is the Main Controller"; and on html {{message}}

edited Jul 21, 2014 at 18:29

Raphael Müller

2,2002 gold badges16 silver badges20 bronze badges

answered Jul 21, 2014 at 18:27

Liad Livnat

7,49517 gold badges62 silver badges98 bronze badges

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

4 Comments

elykl33t Over a year ago

Removing the return didn't do anything, I think I had already tried that. As far as the $scope.message part goes, I had tried to do that originally, but it won't work because my index.html does not have an associated controller. All of the controllers are established using the $routeProvider as you can see above, and I could not figure out a way add the index and make this work. How I was getting around it was using ng-controller with this main controller as I saw in a Plunkr on the AngularJS site.

Liad Livnat Over a year ago

you can add to your body tag <body ng-controller="controllerMain"> if you upload jsfiddle or plunker i can help you more

Raphael Müller Over a year ago

this one should work, if you replace {{main.message}} through {{message}} without modifying the html

elykl33t Over a year ago

Ah, duh. I was separating the two concepts in my head. It makes sense that they work together. Thanks guys!

Collectives™ on Stack Overflow

AngularJS variables not resolving/displaying

1 Answer 1

4 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Related