Javascript 角度uibModal，解析，未知提供程序

我试图通过一个服务公开一个“通用”模式——使用Angular的。以下是该服务的定义：

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

属性的文档如下：

（类型：Object）—将解析并传递给 控制器作为本地人；它相当于中的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>

{{title}}
{{message}}

我缺少什么导致抛出此错误？

您有两个问题：

您需要在模态配置中定义控制器

解析对象需要是

字符串

：

函数

的映射，其中

字符串

是将注入模态控制器的依赖项的名称，

函数

是一个工厂函数，在控制器实例化时用于提供该依赖项

工作示例：

JavaScript HTML

{{vm.content.title}
{{vm.content.message}
确认
取消
点击我

1）是否已安装ui引导程序并将其注入index.html？2） 确保将ui.bootstrap也注入到您的服务中。3） 确保你安装了最新的ui.bootstrap。我已经安装并注入了ui引导，是的。好的。。因为在你展示的服务中，它不是注入的。这可能也会有所帮助-@StephanKristyn是否需要将其注入服务本身，以使其工作？它正在工作，只是再次重申，没有

resolve

属性。我很确定您在使用resolve时需要一个控制器。谢谢！当我有机会使用电脑的时候，明天，我会给它拍一张照片。在这里找到了一篇非常糟糕的文章：将控制器命名为“vm”的约定是什么？vm代表ViewModel。有关这方面的更多信息，请参阅本文：谢谢@Shaun。在小提琴中，除非单击两次，否则模态不会设置动画。知道为什么吗？不知道，我已经有一段时间没有接触ui引导了。可能需要在几个不同的浏览器上测试它，尝试切换到最新版本，等等。如果问题仍然存在，请发布新问题。我现在没钱了，所以无法解决问题。

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

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