2017-09-05 1 views
0

Je suis en train de créer un service pour afficher AngularStrap modaux depuis que j'ai beaucoup de différentes parties de code qui devront déclencher un modal et je ne veux pas courir dans une situation où je aurait une référence circulaire.AngularJS appel AngularStrap Modal du service

C'est un code qui fonctionne lorsque vous avez accès à la portée de $. Par exemple, dans le contrôleur d'applications.

function MyModalController($scope) { 
      $scope.title = 'Draw Object Properties'; 
      $scope.content = 'Hello Modal<br />This is place holder test'; 
     }; 
     MyModalController.$inject = ['$scope']; 

     // Pre-fetch an external template populated with a custom scope 
     var myOtherModal = $modal({ controller: MyModalController, templateUrl: 'webmapapi/modal/toolproperties.html', show: false }); 
     // Show when some event occurs (use $promise property to ensure the template has been loaded) 
     $scope.showModal = function() { 
      myOtherModal.$promise.then(myOtherModal.show); 
     }; 

Comme je l'ai dit, je dois appeler cela à partir d'un service cependant.

(function (angular, undefined) { 
'use strict'; 
angular.module('ModalService', ['service', 'webValues', 'msObjects', 'mgcrea.ngStrap',]) 
    .config(function ($modalProvider) { 
     angular.extend($modalProvider.defaults, { 
      html: true 
     }); 
    })   
    .factory("ModalService", function (MapApiService, webValues, VectorObjs,$modal) { 
     var modalSVC = { 

     }; 
     modalSVC.showModal = function (modalType) { 
      var scope = angular.element(document.getElementById('mainContainer')).scope(); 
      function MyModalController(scope) { 
       scope.title = 'Draw Object Properties'; 
       scope.content = 'Hello Modal<br />This is place holder test'; 
      }; 
      MyModalController.$inject = ['scope']; 

      // Pre-fetch an external template populated with a custom scope 
      var myOtherModal = $modal({ controller: MyModalController, templateUrl: 'myURL.html', show: true }); 
      // Show when some event occurs (use $promise property to ensure the template has been loaded) 
      myOtherModal.show; 
     }; 

     return modalSVC; 
    }) 

}(angular)); 

Ce qui précède n'aime pas la portée que je reçois.

Répondre

0

Ok, il est incroyable de voir comment quelque chose peut être facile une fois que vous savez ce que vous faites !!

Essentiellement, vous voulez mettre en place un service ...

(function (angular, undefined) { 
'use strict'; 
angular.module('ModalService', ['mgcrea.ngStrap']) 
    .controller('ModalServiceController', modalServiceController) 
    .factory("ModalService", function ($animate, $document, $compile, $controller, $http, $rootScope, $q, $templateRequest, $timeout, $modal) { 
     function ModalService() { 

      var self = this; 

      self.showModal = function (title,templateUrl) {     

       var modal = $modal({ 
        title: title, 
        templateUrl: templateUrl, 
        show: true, 
        backdrop: 'static', 
        controller: 'ModalServiceController' 
       }); 
       modal.show; 
      }; 

     } 

     return new ModalService(); 



    }) 
modalServiceController.$inject = ['$scope', '$modal']; 
function modalServiceController($scope,$modal) { 
    //title and content need to be populated so I just left the default values 
     $scope.title = 'Draw Object Properties'; 
     $scope.content = 'Hello Modal<br />This is place holder test'; 

}; 
}(angular)); 

Maintenant que vous avez votre contrôleur mis en place et l'injection modal $, tout ce que vous devez faire à partir de là où vous avez votre service de référence injecté est ...

ModalService.showModal("Your Title", 
"Your URL"); 

J'ai un modèle (doit être formaté comme) mis en place comme Template.html et le contenu sont ...

<div class="modal" tabindex="-1" role="dialog"> 
<div class="modal-dialog"> 
    <div class="modal-content"> 
     <div class="modal-header" ng-show="title"> 
      <button type="button" class="close" ng-click="$hide()">&times;</button> 
      <h4 class="modal-title" ng-bind-html="title"></h4> 
     </div> 
     <div class="modal-body" ng-show="content"> 
      <h4>Text in a modal</h4> 
      <p ng-bind-html="content"></p> 
      <pre>2 + 3 = {{ 2 + 3 }}</pre> 
      <h4>Popover in a modal</h4> 
      <p>This <a href="#" role="button" class="btn btn-default popover-test" data-title="A Title" data-content="And here's some amazing content. It's very engaging. right?" bs-popover>button</a> should trigger a popover on click.</p> 
      <h4>Tooltips in a modal</h4> 
      <p><a href="#" class="tooltip-test" data-title="Tooltip" bs-tooltip>This link</a> and <a href="#" class="tooltip-test" data-title="Tooltip" bs-tooltip>that link</a> should have tooltips on hover.</p> 
     </div> 
     <div class="modal-footer"> 
      <button type="button" class="btn btn-default" ng-click="$hide()">Close</button> 
      <button type="button" class="btn btn-primary" ng-click="$hide()">Save changes</button> 
     </div> 
    </div> 
</div> 

J'espère que cela vous aide !!