AngularJS - Expression not displaying within HTML

Question

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...

You haven't expose userTitle variable on scope, so it won't be available on view for binding. You should be do $scope.pageTitle = pageTitle(inject $scope dependency inside controller) — Pankaj Parkar
– Pankaj Parkar, Commented Jun 2, 2017 at 17:21
You forgot to inject $scope as a dependency in your controller — hjm
– hjm, Commented Jun 2, 2017 at 17:27
You guys are the best... I knew it was going to be something silly :(. — Kade M.
– Kade M., Commented Jun 2, 2017 at 17:31
FYI, if you're just starting a new project on AngularJS right now, you should really look into building components and get away from registering controllers like that. ocLazyLoad will easily let you load modules on demand so you dont have to load your whole app up front. — Langdon
– Langdon, Commented Jun 2, 2017 at 17:34
I'm not loading the whole app front, it's done on demand. (No controllers etc. are brought in via the shell.) But I will look into that... I'm not certain I'll be able to use it, as this is for work and they only allow us to use certain libraries :(. — Kade M.
– Kade M., Commented Jun 2, 2017 at 17:39

Langdon · Accepted Answer · 2017-06-02 17:22:07Z

2

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.

answered Jun 2, 2017 at 17:22

Langdon

20.1k18 gold badges90 silver badges108 bronze badges

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

1 Comment

Kade M. Over a year ago

Thanks Langdon! Between you and the other guys, I got it sorted. Will accept once it allows me to.

Collectives™ on Stack Overflow

AngularJS - Expression not displaying within HTML

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related