在控制器

Question

我一直在尝试和搜索关于此的文章，我发现只是在运行时动态添加状态。我找到的最接近解决方案的方法是使用deferIntercept，$urlRouter.sync()和$urlRouter.listen()。但是，$urlRouter似乎只能在运行时使用（在控制器用户操作之前运行）。

此plunker显示运行动态添加状态到运行时，但挑战是在控制器中实现它。

下面是我想要实现的目标。几个星期以来，我一直在努力解决这个问题。希望有人能给我一些关于如何实现愿望结果的暗示。

// Predefined state in config
$stateProvider.state('default', {
    url: '',
    templateUrl: '',
})

// Predefined state in config
$stateProvider.state('home', {
    url: '',
    templateUrl: '',
})

// Additional Added state in controller when user click button
$scope.clickButton = function () {
    $stateProvider.state('newpage', {
        url: '',
        templateUrl: ''
    })
};

Answer 1

我稍微更新了您的代码：http://plnkr.co/edit/wDVf2S?p=preview

我添加了带有点击回调的控制器和2个我在index.html中使用ng-repeat打印的数组

app.controller('mainCtrl', mainCtrl);

mainCtrl.$inject = ['$urlRouter'];
function mainCtrl ($urlRouter) {
  var vm = this;

  // 'add new state' button click function
  vm.addState = function () {
    var name = 'new-state-' + (vm.hrefs.length - 2);
    var newState = {
      "url": "/" + name,
      "abstract": false,
      "parent": "",
      "views": {}
    };
    // add views
    newState.views[name] = {
      "name": name,
      "template": "<div style='padding:20px; border: solid 1px red; margin-bottom: 15px;'>TEMPLATE FOR <em>" + name.toUpperCase() + "</em> GOES HERE</div>"
    };
    newState.views["container@"] = {
      "name": "container@",
      "templateUrl": "tpl.content.html"
    };
    newState.views["left@"] = {
      "name": "left@",
      "templateUrl": "tpl.left.html"
    };

    $stateProviderRef.state(name, newState);

    vm.hrefs.push(name);
    // add to the head
    vm.views.reverse().push(name);
    vm.views.reverse()

    $urlRouter.sync();
    $urlRouter.listen();
  };

  vm.hrefs = ['home', 'other', 'about'];
  vm.views = ['', 'header', 'left', 'container', 'footer'];
}