Angular 模态内路由

Question

我有 2 条路线：

app.config(['$routeProvider', '$locationProvider', function(
  $routeProvider, $locationProvider) {
    $routeProvider.
    when("/list/:class", {
        controller: "listController",
        templateUrl: "DatabaseObject",
        reloadOnSearch: true
    }).
    when("/edit/:class/:id?", {
        templateUrl: "editortemplate"
    }).
    otherwise("/custombrowsingstartpage");
}]);

他们都工作得很好！

我想要的是能够从“/list/:class”路由中呈现模态 window 中其中一条路由的 "editortemplate"。

在我的 "listController" 中，我有模态打开功能：

    $scope.showEditorPanel = function (size, a, b) {
      //console.log($scope);
      var modalInstance = $modal.open({
      animation: true,
      //templateUrl: '#/edit/'+b+'/'+a,
      templateUrl: 'editortemplate',
      controller: 'editorController',
      size: size,
      backdrop: true,
      scope: $scope
    });

模板呈现良好，但我不知道如何将模板所需的 class 和 id 变量传递给它（如其路线所示）。

我尝试用变量定义路由（class== var b，id== var a）而不是模板 url 但没有成功：

//templateUrl: '#/edit/'+b+'/'+a,

Answer 1

如果你添加一个 'resolve' 对象，你可以发送你想要的东西，我相信这是 "Angular" 使用 $modal 来做到这一点的方法：

$scope.showEditorPanel = function (size, a, b) {
  var modalInstance = $modal.open({
  animation: true,
  templateUrl: 'editortemplate',
  controller: 'editorController',
  size: size,
  backdrop: true,
  resolve: {
           scope: function () {
                            $scope.properties.class = a;
                            $scope.properties.id = b;
                            return $scope.properties;
                        }
           }
});

Answer 2

我只需要将预期变量定义为 $routParams:

  $scope.showEditorPanel = function (size, a, b) {
    //console.log($scope);
    $routeParams.class=b;
    $routeParams.id=a;
    var modalInstance = $modal.open({
      animation: true,
      //templateUrl: '#/edit/TissueSample/'+a,
      templateUrl: 'editortemplate',
      controller: 'editorController',
      size: size,
      backdrop: true,
      scope: $scope
    });

Answer 3

要将数据传递给模态window，需要使用模态实例的resolve方法。它的工作原理与路由器中的属性相同：

$scope.showEditorPanel = function (size, a, b) {
  var modalInstance = $modal.open({
    ...
    resolve: {
      class_id: function () { return $scope.class_id }
    }
  });

然后你需要在模态 window 的控制器中要求：

function editorController ($modalInstance, $scope, class_id) {
  // use the class_id ...
  $scope.class_id = class_id;
}

这修复了模态控制器明确要求中的 'class_id'，将有助于解决问题。您可以通过 $scope 在 "secretly" 中传递它，但这不是一个好主意（我断然避免在 $modal 中使用 $scope 属性！）。显式代码是好代码！

Angular 模态内路由

Angular route inside modal

javascript

angularjs

angular-ui-bootstrap

angular-ui-modal