Javascript 使用AngularJS和AngularUI路由器创建模态

我正在使用UI路由器开发一个angular应用程序，其中我在一个状态中嵌套了几个模式弹出视图。例如，我有一个我定义为设置的状态：

$stateProvider.state('setting-up', {
    url: '/setting-up',
    templateUrl: 'partials/setting-up.html'
});

然后我将模态视图嵌套在该状态中：

//adapted from this tutorial: http://www.sitepoint.com/creating-stateful-modals-angularjs-angular-ui-router/
$stateProvider.state("setting-up.modal", {
  views:{
    "setting-up.modal": {
      templateUrl: "partials/modal.html"
    }
  },
  onEnter: ["$state", function($state) {
    $(document).on("keyup", function(e) {
      if(e.keyCode == 27) {
        $(document).off("keyup");
        $state.go("setting-up");
      }
    });

    $(document).on("click", ".Modal-backdrop, .Modal-holder", function() {
      $state.go("setting-up");
    });

    $(document).on("click", ".Modal-box, .Modal-box *", function(e) {
      e.stopPropagation();
    });
  }],
  abstract: true
});

$stateProvider.state("setting-up.modal.1", {
  views:{
    "setting-up.modal": {
      templateUrl: "partials/setting-up.1.html"
    }
  }
});

$stateProvider.state("setting-up.modal.2", {
  views:{
    "setting-up.modal": {
      templateUrl: "partials/setting-up.2.html"
    }
  }
});
//etc.

像这样直接做，效果很好。问题是，对于多个状态，我有大约10个不同的模态视图，我必须重复相同的代码，因此我想使用一个函数为每个状态生成模态视图

到目前为止，我已经创建了如下内容：

var GenerateModal = function($state, $url) {
  $obj[$state + ".modal"] = {templateUrl: $url }
  return $obj;
};

for (i = 1; i < 10; i++) {
  $stateProvider.state("setting-up.modal.i", GenerateModal("setting-up.modal", "partials/setting-up.i.html" ););
}

var GenerateModal=function（$state，$url）{
$obj[$state+“.modal”]={templateUrl:$url}
返回$obj；
};
对于（i=1；i<10；i++）{
$stateProvider.state（“setup.modal.i”、GenerateModal（“setup.modal”、“partials/setup.i.html”）；
}

---

不幸的是，这不起作用。我应该做些别的事情，还是直接写出来更简单？

为什么不使用ui引导？yozawiratama是对的。只需使用ui引导模式。为什么不使用ui引导？yozawiratama是对的。只需使用ui引导模式。