Angular uibModal，Resolve，Unknown Provider

Question

Angular uibModal，Resolve，Unknown Provider

22

我正在尝试通过一个服务来展示一个“通用”的模态框 - 使用 Angular 的 $uibModal。以下是该服务的定义：

angular.module('app').service('CustomModalService', ['$uibModal', function ($uibModal) {

    var openCustomModal = function (size, title, message) {
        var actionToPerformOnConfirm = action;

        var modalInstance = $uibModal.open({
            templateUrl : 'templates/CustomModal.html',
            size: size,
            resolve: {
                title: title,
                message: message
            }
        });
    };

    return {
        openCustomModal: openCustomModal
    };
}]);

以上并没有太复杂的东西。然而，它却无法正常工作。如果我从对象中删除resolve属性，则该服务可以工作；但是，如果我包括resolve属性，我会收到来自该属性的未知提供者错误。

resolve属性的文档如下：

(类型：对象) - 将被解决并传递给控制器作为本地值的成员；它相当于路由器中的解析属性。

目标是能够为模态框提供一个模板，该模板利用其DOM中的这些属性，例如：

<div ng-controller="CustomModalController">
    <div class="modal-header">
        <h3 class="modal-title">{{title}}</h3>
    </div>
    <div class="modal-body">
        {{message}}
    </div>
    <div class="modal-footer">
        <button class="ad-button ad-blue" type="button" ng-click="confirmAction()"></button>
        <button class="ad-button ad-blue" type="button" ng-click="cancelAction()"></button>
    </div>
</div>

我错过了什么导致这个错误被抛出？

- Thomas

2

你是否已经安装并注入了ui-bootstrap到你的index.html中？
确保你的服务也注入了ui.bootstrap。
确保你已经安装了最新版本的ui.bootstrap。

- Stephan Kristyn

好的。因为在你展示的服务中它没有被注入。这也可能有所帮助-https://github.com/angular-ui/bootstrap/issues/4603 - Stephan Kristyn

@StephanKristyn 它需要被注入到服务本身中才能工作吗？再重申一遍，它是在没有 resolve 属性的情况下工作的。 - Thomas

我非常确定当你使用resolve时，你需要一个控制器。 - Matthew Green

@MatthewGreen 这是我遇到的另一个问题。当我向控制器属性提供文字时（例如 controller: 'MyController'），我的控制器也会抛出相同的错误。 - Thomas

显示剩余4条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Shaun Scovil · Accepted Answer

你有两个问题：

你需要在你的模态框配置中定义控制器。
你的 resolve 对象需要是一个字符串: 函数 的映射，其中字符串 是将被注入到你的模态框控制器中的依赖项的名称，函数 是一个工厂函数，用于在实例化控制器时提供该依赖项。

工作示例：JSFiddle

JavaScript

angular.module('myApp', ['ui.bootstrap'])
  .controller('MyModalController', MyModalController)
  .directive('modalTrigger', modalTriggerDirective)
  .factory('$myModal', myModalFactory)
;

function MyModalController($uibModalInstance, items) {
  var vm = this;
  vm.content = items;
  vm.confirm = $uibModalInstance.close;
  vm.cancel = $uibModalInstance.dismiss;
};

function modalTriggerDirective($myModal) {
  function postLink(scope, iElement, iAttrs) {
    function onClick() {
      var size = scope.$eval(iAttrs.size) || 'lg'; // default to large size
      var title = scope.$eval(iAttrs.title) || 'Default Title';
      var message = scope.$eval(iAttrs.message) || 'Default Message';
      $myModal.open(size, title, message);
    }
    iElement.on('click', onClick);
    scope.$on('$destroy', function() {
      iElement.off('click', onClick);
    });
  }

  return {
    link: postLink
  };
}

function myModalFactory($uibModal) {
  var open = function (size, title, message) {
    return $uibModal.open({
      controller: 'MyModalController',
      controllerAs: 'vm',
      templateUrl : 'templates/CustomModal.html',
      size: size,
      resolve: {
        items: function() {
          return {
            title: title,
            message: message
          };
        }
      }
    });
  };

  return {
    open: open
  };
}

HTML

<script type="text/ng-template" id="templates/CustomModal.html">
  <div class="modal-header">
    <h3 class="modal-title">{{vm.content.title}}</h3>
  </div>
  <div class="modal-body">
    {{vm.content.message}}
  </div>
  <div class="modal-footer">
    <button class="ad-button ad-blue" type="button" ng-click="vm.confirm()">
      confirm
    </button>
    <button class="ad-button ad-blue" type="button" ng-click="vm.cancel()">
      cancel
    </button>
  </div>
</script>

<button modal-trigger size="'sm'" title="'Hello World!'" message="'This is a test'">
  Click Me
</button>