Angular uibModal、Resolve、Unknown Provider [英] Angular uibModal, Resolve, Unknown Provider

问题描述

我正在尝试公开一个通用"模态 - 使用 Angular 的 $uibModal - 通过服务.这是该服务的定义:

angular.module('app').service('CustomModalService', ['$uibModal', function ($uibModal) {var openCustomModal = 函数(大小、标题、消息){var actionToPerformOnConfirm = 动作；var modalInstance = $uibModal.open({templateUrl : 'templates/CustomModal.html',尺寸:尺寸，解决: {标题:标题，消息:消息}});};返回 {openCustomModal: openCustomModal};}]);

没什么太复杂的，上面.但是，它不起作用.如果我从对象中删除 resolve 属性，服务就可以工作；但是，如果我包含 resolve 属性，我会得到 Unknown Provider 源自该属性的错误.

resolve 属性的文档如下:

<块引用>

(Type: Object) - 将被解析并传递给作为本地人的控制器；它相当于路由器.

目标是能够为在其 DOM 中利用这些属性的模态提供模板，例如:

<div class="modal-header"><h3 class="modal-title">{{title}}</h3>
<div class="modal-body">{{信息}}

<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>

我遗漏了什么导致抛出此错误?

解决方案

你有两个问题:

1. 您需要在模态配置中定义控制器
2. 您的解析对象需要是 string 的映射:function，其中 string 是将被注入的依赖项的名称您的模态控制器，function 是一个工厂函数，用于在控制器实例化时提供该依赖项.

工作示例:JSFiddle

JavaScript

angular.module('myApp', ['ui.bootstrap']).controller('MyModalController', MyModalController).directive('modalTrigger', modalTriggerDirective).factory('$myModal', myModalFactory);函数 MyModalController($uibModalInstance, items) {var vm = 这个；vm.content = 项目；vm.confirm = $uibModalInstance.close;vm.cancel = $uibModalInstance.dismiss;};功能 modalTriggerDirective($myModal) {函数 postLink(scope, iElement, iAttrs) {函数 onClick() {var size = scope.$eval(iAttrs.size) ||'lg';//默认为大尺寸var title = scope.$eval(iAttrs.title) ||'默认标题';var message = scope.$eval(iAttrs.message) ||'默认消息';$myModal.open(大小、标题、消息);}iElement.on('click', onClick);scope.$on('$destroy', function() {iElement.off('click', onClick);});}返回 {链接:postLink};}函数 myModalFactory($uibModal) {var open = 函数(大小、标题、消息){返回 $uibModal.open({控制器:'MyModalController'，控制器为:'vm'，templateUrl : 'templates/CustomModal.html',尺寸:尺寸，解决: {项目:函数(){返回 {标题:标题，消息:消息};}}});};返回 {开:开};}

HTML

<button modal-trigger size="'sm'" title="'Hello World!'" message="'这是一个测试'">点击我

I am trying to expose a "generic" modal - using Angular's $uibModal - through a service. Here is the definition of that service:

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
    };
}]);

Nothing too complicated, above. However, it is not working. If I remove the resolve property from the object, the service works; however, if I include the resolve property, I get the Unknown Provider error originating from that property.

The documentation for the resolve property reads:

(Type: Object) - Members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property in the router.

The objective is to be able to provide a template for the modal that utilizes these properties in its DOM, e.g. :

<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>

What am I missing that is causing this error to be thrown?

解决方案

You have two problems:

1. You need to define the controller in your modal config
2. Your resolve object needs to be a map of string: function, where string is the name of the dependency that will be injected into your modal's controller, and function is a factory function that will be used to provide that dependency when the controller is instantiated.

Working example: 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>

这篇关于Angular uibModal、Resolve、Unknown Provider的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！