2017-09-05 69 views
0

我想创建一个服务来显示Angular-Strap模态,因为我有很多不同的代码部分需要触发一个模态,而我不想遇到这种情况,会有一个循环引用。AngularJS从服务调用AngularStrap模态

这是可以访问$ 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: '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); 
     }; 

就像我说过的,我需要从服务中调用它。

(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)); 

上面不喜欢我得到的范围。

回答

0

好吧,一旦你知道你在做什么,这是多么容易的事情!

从本质上讲,你会想建立一个服务...

(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)); 

现在,你有你的控制器设置和注入$模式,所有你从任何地方你有你的服务引用注入做的是...

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

我有一个模板设置为Template.html和内容(必须格式化为)...

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

我希望这可以帮助你!