UI-Router state controller doesnt update scope

Question

I am using UI-router to control the states of a single page application. I have a big chain of states that I narrowed to these:

    $stateProvider
    .state('app', {
      url: "/",
      abstract: true
    })
    .state('app.main', {
      url: "/main",
      abstract: true
    })
    .state('app.main.users', {
      url: "/users",
      abstract: true,
      controller: 'UsersController',
      controllerAs: 'uc'
    })
    .state('app.main.users.list', {
      url: "/list",
      templateUrl: "list.html",
    });

Imagine that this app.main.users is an abstract state for a CRUD which will use the same controller for all the operations.

The problem is that the "list.html" file from the child controller cannot see the values from the controller.

~~I have put up a plunkr sample to the issue: Plunkr~~

Here is the full code:

    var myapp = angular.module('myapp', ["ui.router"])
myapp.config(function($stateProvider, $urlRouterProvider) {

  $urlRouterProvider.otherwise("/");

  $stateProvider
    .state('app', {
      url: "/",
      abstract: true
    })
    .state('app.main', {
      url: "/main",
      abstract: true
    })
    .state('app.main.users', {
      url: "/users",
      abstract: true,
      controller: 'UsersController',
      controllerAs: 'uc'
    })
    .state('app.main.users.list', {
      url: "/list",
      templateUrl: "list.html",
    });
})

myapp.controller('UsersController', usersController);
  function usersController() {
    console.log("UsersController instantiated");
    var vm = this;
    vm.user = 'username';
  }

If you have any idea, please let me know. I can't find a solution to this. Thanks!

Ive just saw the problem with the plunkr. Sorry for that, I ve had to change some code to make this sample so I might have forgot something. Ill take a look on it right now. Thanks. I understood your point of just one state active at a time, but the fact that the top state is an abstract state, doesnt make the childs inherits its controller definitions? — Felipe Matias, Nov 27 '17 at 13:47
Refer this https://stackoverflow.com/questions/27696612/how-do-i-share-scope-data-between-states-in-angularjs-ui-router/27699798#27699798 — code.rookie, Nov 27 '17 at 13:54
Thanks! Ive saw this topic before, the problem is that I am not using $scope. I am using controllerAs syntax. When I navigate to the view, the HTML renders, the controllers functions are called and the vm.variables are changed, but this doesn't reflect on the rendered page. — Felipe Matias, Nov 27 '17 at 14:07

score 0 · Accepted Answer · answered Nov 28 '17 at 16:40

I've solved the problem.

I was missing some things in the concept of the states. First of all I needed an on my app.main state so it could render the app.main.users state. Also my controllers declaration was wrong.

This Plunkr is working with the desired scenario.

Thanks for the help.

UI-Router state controller doesnt update scope

1 Answers1