UI路由器状态控制器不会更新范围

时间:2017-11-27 13:23:16

标签: javascript angularjs angular-ui-router

我正在使用UI路由器来控制单个页面应用程序的状态。我有一大堆国家,我缩小到这些:

    $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",
    });

想象一下,这个app.main.users是一个CRUD的抽象状态,它将为所有操作使用相同的控制器。

问题是来自子控制器的“list.html”文件无法看到控制器中的值。

我已经针对这个问题提出了一个样本:Plunkr

以下是完整代码:

    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';
  }

如果您有任何想法,请告诉我。我无法找到解决方案。 谢谢!

1 个答案:

答案 0 :(得分:0)

我已经解决了这个问题。

我在州的概念中遗漏了一些东西。首先,我需要一个在我的app.main状态,以便它可以呈现app.main.users状态。我的控制器声明也是错误的。

Plunkr正在使用所需的方案。

感谢您的帮助。