Angular uibModal, Resolve, 알 수 없는 공급자

Angular uibModal, Resolve, 알 수 없는 공급자

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객체로부터의 속성, 서비스는 작동합니다; 그러나, 만약 제가 포함한다면,resolveproperty, 해당 property에서 발생하는 Unknown Provider 오류가 발생합니다.

에 대한 문서.resolve속성 읽기:

(Type: Object) - 해결되고 로컬로 컨트롤러에 전달되는 멤버. 라우터의 해결 속성과 맞먹습니다.

목표는 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>

이 오류가 발생하는 원인은 무엇입니까?

두 가지 문제가 있습니다.

1. 모드 구성에서 컨트롤러를 정의해야 합니다.
2. 확인 개체는 다음의 지도여야 합니다.string:function,어디에string는 당신의 모달의 컨트롤러에 주입될 종속성의 이름입니다.function는 컨트롤러가 인스턴스화될 때 해당 종속성을 제공하는 데 사용될 공장 기능입니다.

작동 예: JSFiddle

자바스크립트

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>

언급URL : https://stackoverflow.com/questions/35350463/angular-uibmodal-resolve-unknown-provider