AngularJS 从服务中调用 AngularStrap Modal

Question

我正在尝试创建一个服务来显示 Angular-Strap 模态，因为我有许多不同的代码部分需要触发一个模态，我不想运行进入我会有循环引用的情况。

这是在您有权访问 $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));

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

Answer 1

好吧，一旦你知道自己在做什么，事情会变得如此简单，这真是太神奇了！！

基本上你会想要设置一个服务...

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

现在您已经设置了控制器并注入了 $modal，在注入了服务引用的任何地方，您所要做的就是...

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>

希望对您有所帮助！！

AngularJS 从服务中调用 AngularStrap Modal

AngularJS call AngularStrap Modal from service

angularjs

angular-strap