CODEWITHSUNDEEP
javascripthtmlangularjs
Kade M.
Kade M.

Reputation: 181

AngularJS - Expression not displaying within HTML

I've gone through other questions, but couldn't find any that dynamically loaded controllers/views the way I am. I still fear this may be a duplicate question, but I have done my due diligence and came up empty. Please point me in the right direction if you're better with search terms.

This is how my app works: My index page loads up RequireJS pointing to a main.js file which outlines the initial includes (app.js, routeResolver, and a data service (unused currently). The routeResolver allows me to dynamically load in my views and respective controllers using code such as below within app.js. (Using a consistent naming convention, passing 'home' loads in home.html and associates it with homeController.js from their respective controllers/views locations.) We do not need to use ng-app='appname' because it’s added at runtime by calling angular.bootstrap() within the app.js file.

//Define routes - controllers will be loaded dynamically
var route = routeResolverProvider.route;
$routeProvider
  .when('/', route.resolve('home'))
  .when('/createnew', route.resolve('createnew'))

In my controller, I'm loading a variable from sessionStorage. (I have confirmed it is there/available. The test alert displays it correctly.) My problem is it is not displayed on the html page, and the console does not produce any errors. I have confirmed the page is accurately associating itself with the controller because if I remove the expression, I get an error that it is not defined... but despite it containing a value, it still doesn't display. All I get is 'Welcome '.

Controller: 

'use strict';

define(['app'], function (app) {
    var injectParams = ['$location', '$filter', '$window', '$timeout'];

    var homeController = function ($location, $filter, $window, $timeout) {
          var userTitle = sessionStorage.getItem('userTitle');
          alert(userTitle);
    };

    homeController.$inject = injectParams;
    app.register.controller('homeController', homeController);
});

View:

<div class="container-fluid text-center">
     <div class="row content">
          <div class="col-sm-2 sidenav">
               <p><a href="#">Placeholder</a></p>
          </div>
          <div class="col-sm-8 text-left">
               <p>Welcome {{ userTitle }}</p>
          </div>
          <div class="col-sm-2 sidenav">
               <div class="well">
                    <p>Placeholder</p>
               </div>
               <div class="well"></div>
          </div>
     </div>
</div>

I'll gladly share more code, but I didn't want to make this too long and I feel like I'm just missing something silly...

Upvotes: 0

Views: 120

Answers (1)

Langdon
Langdon

Reputation: 20063

At first glance, I noticed you're making a local variable named userTitle when you want to add that variable to $scope.

Inject $scope into homeController and $scope.userTitle = 'test';. This should get you what you want.

Upvotes: 2

Related Questions