没有resolve选项，Angularjs ui bootstrap modal不能工作

Angularjs ui bootstrap modal doesn't work without resolve option

本文关键字：bootstrap modal 不能 工作 ui Angularjs resolve 选项 没有      更新时间：2023-09-26

我已经创建了一个可重用的组件，但我一直得到问题，如果我不通过解决，这里有什么问题…由于

$scope.open = function () {
             var modalInstance = $modal.open({
                templateUrl: '../../App/template/commentsModal.html',
                size: ''
                 ,
                controller: ModalInstanceCtrl,
                 resolve: {
                     items: function () {
                         return 'b';
                     }
                 }

             });

但如果我删除解析，然后我一直得到[$injector:unpr]未知的提供商:itemsProvider <-项目

items是什么?这是angular内部的东西吗?这是模态控制器:

.controller('ModalInstanceCtrl', function ($scope, $modalInstance) {
    $scope.ok = function () {
        $modalInstance.close();
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
})

您需要将项列为您对新控制器的依赖项之一，这就是resolve的目的。

$scope.open = function () {
         var modalInstance = $modal.open({
            templateUrl: '../../App/template/commentsModal.html',
            size: '',
            controller: ModalInstanceCtrl,
            resolve: {
                 items: function () {
                     return 'b';
                 }
             }
         });
         modalInstance.result.then(function(data) { //make sure you are declaring your promise
              confirm(data);
         });
};

你不需要声明你的控制器作为你模块的一部分，你可以简单地创建一个对象。

var ModalInstanceCtrl = function ($scope, $modalInstance, *items*) {
    $scope.items = items;
    $scope.ok = function () {
        $modalInstance.close($scope.items);
    };
    $scope.cancel = function () {
        $modalInstance.dismiss('cancel');
    };
});

本质上，resolve会将项目发送到你定义的模态控制器，将它赋值给那个局部作用域，然后带着promise返回给你的起始控制器。您可以看到如何获取数据，传递给要更改的模态，并返回新结果并重新绑定到原始控制器。请确保在主控制器之外声明你的模态控制器，并使用此方法传入你需要的任何其他内容。

确保你在主控制器中声明了$modal，在模态控制器中声明了$modalInstance。

相关文章：