使用角模态作为警报

Question

我对AngularJs还是比较新的，我创建了一个非常通用的模态视图，我想要做的是能够全局使用它来代替其他当前alert（）的，但是一些他们将有不同的文本和按钮等等...什么是实例化全局控制器的最佳方法，但为每个控制器设置不同的首选项？

这是我的例子：

controller.js

(function() { 

     var test= angular.module('test'); 

     test.controller('modal', function ($scope, $uibModal) { 
      $scope.modal= function() { 


       var modalInstance = $uibModal.open({ 
        animation: $scope.animationsEnabled, 
        templateUrl: 'template.html', 
        controller: 'test', 
        scope: $scope, 
        size: 'medium', 
        backdrop: 'static' 
       }); 
       modalInstance.result.then(function() { 
       }, function() { 
        console.log("dismissed") 
       }); 
      } 
     }); 

     test.controller('modalInstance', function ($scope, $uibModalInstance) { 
      $scope.cancel = function() { 
       $uibModalInstance.dismiss('cancel'); 
      }; 
     }); 


    }) 
    (); 

模板，其中警报（）将

<div class="modal-header"> 
</div> 
<div class="modal-body" style="margin: 0 auto;" ng-controller="exportController"> 
    <p>Are you sure you want to continue?</p> 
</div> 
<div class="modal-footer btn-group-xs"> 
    <button class="btn btn-primary" type="button" ng-click="open()">Ok</button> 
    <button class="btn btn-primary" type="button" ng-click="cancel()">Cancel</button> 
</div> 

例

$scope.launchTerms = function($event) { 
       $event.preventBasick(); 
       alert("Launch Terms"); 
      }; 

任何人都可以举个例子吗？

Answer 1

你可以写一个服务，是调用$uibModal.open()那么无论你需要它，而不是$uibModal

简单的例子注入该服务的包装。

app.factory('myModals', ['$uibModal', function ($uibModal) { 
    // called from various methods within factory 
    function openModal(template, data, options) { 
     var modalOpts = { 
      animation : true, 
      templateUrl : template, 
      controller : function ($scope, $uibModalInstance, alert_data) { 
       $scope.alert_data = alert_data; 
       $scope.cancel = function() { 
        $uibModalInstance.dismiss('cancel'); 
       }; 
      }, 
      resolve : { 
       alert_data : data 
      }, 
      size : 'medium', 
      backdrop : 'static' 
     }; 
     // extend options set in each use type function 
     if (options) { 
      angular.extend(modalOpts, modalOpts); 
     } 
     var modalInstance = $uibModal.open(modalOpts); 

     modalInstance.result.then(function (data) { 
      // always do something when close called 
      return data; 
     }, function (data) { 
      //always do something when dismiss called 
      console.log("modal dismissed"); 
      return data 
     }); 

     return modalInstance; 
    } 

    // one type of modal 
    function alert(type, text, size) { 
     var template = type === 'success' ? 'template-success.html' : 'template-error.html'; 

     var opts = { 
      size : size || 'sm' 
     }; 
     var data = { 
      title : type === 'success' ? "OK" : "Ooops", 
      text : text 
     }; 

     return openModal(template, data, opts); 

    } 

    return { 
     alert : alert 
    } 

}]); 

控制器

app.controller('somctrl', function($scope, myModals){ 
    $scope.successMessage = 'Way to go Jack!'; 
    var modal = myModals.alert('success', $scope.successMessage, 'small'); 

    modal.result.then(function(data){ 
     // do something with data on close 
    }, function(data){ 
     // do something on dismiss 
    }) 


}); 

DEMO

Answer 2

我认为解决这个问题的好方法是创建一个服务。通过这种方式只实例化服务，您可以在每个新控制器中包含所需的数据而无需重复代码。注意：您将需要moddify代码与你结合你的需求：

angular.module('test.modalService', []) 
     .factory("modalService", function() { 

      var ConstructorMOdal = function (scope) { 
       this._fillModalScope(scope); 
      }; 

      ConstructorModal.prototype._fillModalScope = function (scope) { 
       this._scope = scope; 
       this._scope.message= scope.message; 
       // Do your magic -> variables filled here will be present in your controller scope 
      }; 

      return { 
       ConstructorModal: ConstructorModal 
      }; 

     }); 

包括在你的控制器中的服务，在这里实例化（$范围和服务是作为一个例子，你可以通过任何你想要的和修改服务）：

test.controller('modal', function ($scope, $uibModal, modalService) { ... 
new modalService.ConstructorModal($scope);