Question

我想问一下，我知道AngularUI的模态包含2个控制器1是我用来处理数据的默认控制器，另一个是处理$ modelInstances，这对我来说很好。但我想做的是我在模态显示中渲染/编辑数据时会使用多个范围。我没有在控制器之间解决所有这些范围，而是试图将两个控制器合并在一起，以便可以在网页之间共享范围。（注意它是一个实时范围）我所做的就像下面的

angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('ModelCtrl', function ($scope, $modal, $modalInstance) {

  $scope.items = ['item1', 'item2', 'item3'];
  //I have a few more scopes to be used in the model

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      controller: 'ModelCtrl',
      size: 'lg',
      resolve: {
        items: function () {
          return $scope.items;
        }
      }
    });

    modalInstance.result.then(function () {

    }, function () {

    });
  };

  $scope.ok = function () {
    $modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    $modalInstance.dismiss('cancel');
  };
});

我已将两个控制器合二为一，然后将相关模块注入，这样理论上它就能正常工作。但相反，我所得到的是一个错误[$injector:unpr] Unknown provider: $modalInstanceProvider <- $modalInstance <- ModelCtrl。从这个错误中了解这意味着我注入了一个未知的提供者$modalInstanceProvider，所以我试图从模块中删除$ modalInstance，Modal设法打开但close和{的操作{1}}向我发出错误dismiss。我做错了什么，我应该如何组合两个控制器而不是将它们分成2个？

这是plunkr链接，因此您可以理解我的意思。谢谢。

Answer 1

您不必为创建的模态创建新控制器这样做：

angular.module('app').controller('ModelCtrl', function ($scope, $modal) {

看到我没有注射$modalInstance

然后模态创建就像：

var modalInstance = $modal.open({
  animation: true,
  templateUrl: 'myModalContent.html',
  size: 'lg',
  scope: $scope, //i make modal scope the same as  ModelCtrl scope
});

然后使用您创建的modalInstance来操作模态

所以最后的代码是

angular.module('app', ['ngAnimate', 'ui.bootstrap']);
angular.module('app').controller('ModelCtrl', function ($scope, $modal) {

  $scope.items = ['item1', 'item2', 'item3'];
  //I have a few more scopes to be used in the model

  $scope.open = function (size) {

    var modalInstance = $modal.open({
      animation: true,
      templateUrl: 'myModalContent.html',
      size: 'lg',
      scope: $scope
    });

    modalInstance.result.then(function () {

    }, function () {

    });
  };

  $scope.ok = function () {
    modalInstance.close($scope.selected.item);
  };

  $scope.cancel = function () {
    modalInstance.dismiss('cancel');
  };
});

Answer 2

我检查了上面的答案，但modalInstance关闭无效。所以改变了下面的代码，它现在正在工作。

$scope.open = function() {
$scope.$modalInstance = $modal.open({
    scope: $scope,
    templateUrl: "modalContent.html",
    size: '',
}
};

$scope.ok = function() {
    $scope.$modalInstance.close();
};

$scope.cancel = function() {
    $scope.$modalInstance.dismiss('cancel');
};

Angularjs - 一个控制器内的Angular UI $ modal和$ modalInstance

2 个答案: