Question

我正在使用UI-Router处理一个角度应用程序，我在一个州内嵌套了几个模态弹出视图。例如，我有一个状态我已定义为设置：

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

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

使用带角度UI路由器的AngularJS创建模态

0 个答案: