Angular ui router controlleras syntax not working

Question

I an trying to develop an angular app using ui router, however I am stuck trying to get the controllerAs syntax working correctly.

my stateProvider looks like this

$stateProvider
    .state('microsite', {
      url: "/",
      templateUrl: "microsite.tmpl.html",
      abstract: true
    })
    .state('microsite.home', {
      url: "",
      templateUrl: "home.tmpl.html",
      controller: 'MicrositeController as vm',
      data: {
        page_name: 'Introduction'
      }
    })
    .state('microsite.features', {
      url: "/features",
      templateUrl: "features.tmpl.html",
      controller: 'MicrositeController as vm',
      data: {
        page_name: 'Features'
      }
    })
    .state('microsite.about', {
      url: "/about",
      templateUrl: "about.tmpl.html",
      controller: 'MicrositeController as vm',
      data: {
        page_name: 'About'
      }
    });

As you can see I setup an abstract default view, and three pages. I have also assigned a data object with a page_name for each page. This feeds into my controller

myapp.controller('MicrositeController', ['$state', function($state) {
  var vm = this;
  vm.page_name = $state.current.data.page_name;
  vm.sidenav_locked_open = false;

  vm.toggleSideNav = function() {
    if ($mdMedia('gt-sm')) {
      vm.sidenav_locked_open = !vm.sidenav_locked_open;
    } else {
      $mdSidenav('left').toggle();
    }
  }
}]);

and then delivers the name to the page via the vm.page_name variable. However this is not happening. The variable never makes it to the page. Also I have a vm.toggleSideNav function that is suppose to open and close the sidenav, but that never gets called.

the toolbar with the sidenav button is this

<md-toolbar layout="row" class="md-whiteframe-glow-z1 site-content-toolbar">
<div class="md-toolbar-tools docs-toolbar-tools" tabIndex="-1">
    <md-button class="md-icon-button" ng-click="vm.toggleSideNav()" aria-label="Toggle Menu">
        XXX
    </md-button>

    <h1>{{vm.page_name}}</h1>
</div>
</md-toolbar>

here is a plnkr example http://plnkr.co/edit/Na5zkF?p=preview

I am looking for someone to help me figure out the last piece on how to get the toggleSideNav function to get called when I click on the xxx button, and how to get the title to display in the toolbar.

Answer 1

From the Docs:

controller (optional) string function

Controller fn that should be associated with newly related scope or the name of a registered controller if passed as a string. Optionally, the ControllerAs may be declared here.

 controller: "MyRegisteredController"

 controller:
    "MyRegisteredController as fooCtrl"

 controller: function($scope, MyService) {
    $scope.data = MyService.getData(); }

— UI Router $stateProvider API Reference.

According to the Docs, your controller declaration is correct.

controller: 'MicrositeController as vm'

You need to look for your problem elsewhere.

---

UPDATE

Put the controller in the root state:

$stateProvider
    .state('microsite', {
      url: "/",
      templateUrl: "microsite.tmpl.html",
      //IMPORTANT == Put controller on root state
      controller: 'MicrositeController as vm',
      abstract: true
    })
    .state('microsite.home', {
      url: "",
      templateUrl: "home.tmpl.html",
      ̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶:̶ ̶'̶M̶i̶c̶r̶o̶s̶i̶t̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶ ̶a̶s̶ ̶v̶m̶'̶,̶
      data: {
        page_name: 'Introduction'
      }
    })
    .state('microsite.features', {
      url: "/features",
      templateUrl: "features.tmpl.html",
      ̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶:̶ ̶'̶M̶i̶c̶r̶o̶s̶i̶t̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶ ̶a̶s̶ ̶v̶m̶'̶,̶
      data: {
        page_name: 'Features'
      }
    })
    .state('microsite.about', {
      url: "/about",
      templateUrl: "about.tmpl.html",
      ̶c̶o̶n̶t̶r̶o̶l̶l̶e̶r̶:̶ ̶'̶M̶i̶c̶r̶o̶s̶i̶t̶e̶C̶o̶n̶t̶r̶o̶l̶l̶e̶r̶ ̶a̶s̶ ̶v̶m̶'̶,̶
      data: {
        page_name: 'About'
      }
    });
})

The DEMO on PLNKR