jameskleeh / angular-confirm

Confirmation modal dialog for AngularJS
Apache License 2.0
150 stars 75 forks source link

It dosen't work with Angularjs+Requirejs+AngularAMD #63

Open manmamen opened 8 years ago

manmamen commented 8 years ago

The bowser throw an error:"Error: [$injector:unpr] http://errors.angularjs.org/1.4.6/$injector/unpr?p0=onfirmProvider%20%3C-%20%24confirm"

jameskleeh commented 8 years ago

Please provide a plunker/fiddle that shows this error

manmamen commented 8 years ago

This code with angular-confirm 1.1.x and i changed "$modalInstance" to "$uibModalInstance","$modal" to "$uibModal" ,it works well. https://plnkr.co/edit/A6mc6wARGZUMqE1wFamu?p=preview

This code with angular-confirm 1.2.x throw an error https://plnkr.co/edit/iNHpIUeJoiFEP9JXWmw3?p=preview

jameskleeh commented 8 years ago

I'm not familiar enough with AMD to understand what is happening there. I just loaded the latest code on the demo page and it runs fine. If you figure it out please submit a PR

manmamen commented 8 years ago

@Schlogen Thanks,I try the latest code (https://plnkr.co/edit/iNHpIUeJoiFEP9JXWmw3?p=preview) and it still throw error , image

I will try to fix it and feedback.

manmamen commented 8 years ago

Hi @Schlogen ,i try to fix the code like this(https://plnkr.co/edit/3sGRXl0UvkothOcIRf0O?p=preview) and it works fine.

(function (f, define) {
    define([], f);
}(function () {
   (function (angular) {
         angular.module('angular-confirm', ['ui.bootstrap.modal'])
          .controller('ConfirmModalController', ["$scope", "$uibModalInstance", "data", function ($scope, $uibModalInstance, data) {
              $scope.data = angular.copy(data);

              $scope.ok = function (closeMessage) {
                  $uibModalInstance.close(closeMessage);
              };

              $scope.cancel = function (dismissMessage) {
                  if (angular.isUndefined(dismissMessage)) {
                      dismissMessage = 'cancel';
                  }
                  $uibModalInstance.dismiss(dismissMessage);
              };

          }])
          .value('$confirmModalDefaults', {
              template: '<div class="modal-header"><h3 class="modal-title">{{data.title}}</h3></div>' +
              '<div class="modal-body">{{data.text}}</div>' +
              '<div class="modal-footer">' +
              '<button class="btn btn-primary" ng-click="ok()">{{data.ok}}</button>' +
              '<button class="btn btn-default" ng-click="cancel()">{{data.cancel}}</button>' +
              '</div>',
              controller: 'ConfirmModalController',
              defaultLabels: {
                  title: 'Confirm',
                  ok: 'OK',
                  cancel: 'Cancel'
              }
          })
          .factory('$confirm', ["$uibModal", "$confirmModalDefaults", function ($uibModal, $confirmModalDefaults) {
              return function (data, settings) {
                  var defaults = angular.copy($confirmModalDefaults);
                  settings = angular.extend(defaults, (settings || {}));

                  data = angular.extend({}, settings.defaultLabels, data || {});

                  if ('templateUrl' in settings && 'template' in settings) {
                      delete settings.template;
                  }

                  settings.resolve = {
                      data: function () {
                          return data;
                      }
                  };

                  return $uibModal.open(settings).result;
              };
          }])
          .directive('confirm', ["$confirm", "$timeout", function ($confirm, $timeout) {
              return {
                  priority: 1,
                  restrict: 'A',
                  scope: {
                      confirmIf: "=",
                      ngClick: '&',
                      confirm: '@',
                      confirmSettings: "=",
                      confirmTitle: '@',
                      confirmOk: '@',
                      confirmCancel: '@'
                  },
                  link: function (scope, element, attrs) {

                      function onSuccess() {
                          var rawEl = element[0];
                          if (["checkbox", "radio"].indexOf(rawEl.type) != -1) {
                              var model = element.data('$ngModelController');
                              if (model) {
                                  model.$setViewValue(!rawEl.checked);
                                  model.$render();
                              } else {
                                  rawEl.checked = !rawEl.checked;
                              }
                          }
                          scope.ngClick();
                      }

                      element.unbind("click").bind("click", function ($event) {

                          $event.preventDefault();

                          $timeout(function () {

                              if (angular.isUndefined(scope.confirmIf) || scope.confirmIf) {
                                  var data = { text: scope.confirm };
                                  if (scope.confirmTitle) {
                                      data.title = scope.confirmTitle;
                                  }
                                  if (scope.confirmOk) {
                                      data.ok = scope.confirmOk;
                                  }
                                  if (scope.confirmCancel) {
                                      data.cancel = scope.confirmCancel;
                                  }
                                  $confirm(data, scope.confirmSettings || {}).then(onSuccess);
                              } else {
                                  scope.$apply(onSuccess);
                              }

                          });

                      });

                  }
              }
          }]);
    }(window.angular));
},
typeof define == 'function' && define.amd ? define : function (a1, a2) {
    (a2 || a1)();
}));
jameskleeh commented 8 years ago

@manmamen It would no longer work for CommonJS folks with that change