Question

我试图使用ui-router来触发特定状态的模态，而不是改变整个视图。为此，我实现了一种略微适应的what is given in the FAQ形式，因为我使用的是angular-foundation而不是引导程序。当我触发状态时，会显示模态，但是即使在我的状态中没有指定视图，它也会清除现有视图：

.state('selectModal',
  onEnter: ($modal, $state, $sessionStorage) ->
    $modal.open(
      templateUrl: 'views/select_modal.html'
      windowClass: 'tiny'
      controller: 'SelectCtrl'
      resolve:
        options: (Restangular) -> Restangular.all('options').getList()
    )
    .result.then (result) ->
      $sessionStorage.selected = result
      $state.go 'resource', id: result.id
)

我应该为此状态配置视图/父级，例如<div ui-view='modal'></div>或parent:'main'（我希望在切换时不会更改状态，可以从任何州访问它）？

Answer 1

使用“。”指定它具有父状态。命名惯例。（将“parentState”替换为实际父级的名称）：。state（'parentState.selectModal'，...

Answer 2

您是否考虑过将模态代码放入服务中并在每个使用该模式的控制器中调用该服务？

angular.module('app').service('modal', function(){

    function open(){
        $modal.open(
            templateUrl: 'views/select_modal.html',
            windowClass: 'tiny',
            controller: 'SelectCtrl',
            resolve: {
                options: function(Restangular) { Restangular.all('options').getList() }
            }
        ) // .result... if it's generic, otherwise put it in the controller
    }
});

angular.module('myapp').controller('main', function($scope, modal){

    modal.open().result.then(function(result) {
        $sessionStorage.selected = result;
        $state.go('resource', id: result.id);
    });

}

UI-Router模式更改现有视图

2 个答案: