如何使用Angular-Strap创建一个带控制器的模态？

I'm struggling to find the right way to use an Angular-Strap modal/aside with a controller.

我正在努力寻找使用Angular-Strap模态/控制器的正确方法。

Yes, the calling code could inject the $scope, making it available to the modal. But there are issues with that.

是的,调用代码可以注入$ scope,使其可用于模态。但是有一些问题。

myModal = $modal({
scope: $scope,
template: 'template.html',
show: false,
backdrop: "static",
keyboard: false,
persist: true

});

This will pollute the calling controller with potentially modal-only methods and properties.

这将使用潜在的仅模态方法和属性污染调用控制器。

I usually use "controllerAs", and therefore don't even have a $scope to inject into the modal in the first place!

我通常使用“controllerAs”,因此首先甚至没有$ scope注入模态!

You could create a new $scope and then insert methods into that, but again, that would require injection of $scope into the parent controller. Bad bad bad.

您可以创建一个新的$ scope,然后将方法插入其中,但同样需要将$ scope注入父控制器。坏坏。

If I use ng-controller inside the modal template, I can have my controller. But his gives me another problem: now I cannot inject data into the modal controller, and there is no way my calling code can know when the modal is closed and returning data from the modal also becomes a chore (involves a factory just to keep the parent and child controller data synchronized).

如果我在模态模板中使用ng-controller,我可以拥有我的控制器。但他给了我另一个问题:现在我无法将数据注入到模态控制器中,并且我的调用代码无法知道何时关闭模态并且从模态返回数据也变成了一件苦差事(涉及工厂只是为了保持父和子控制器数据同步)。

I'm really struggling how to make this the best way.

我真的在努力如何使这成为最好的方式。

Any ideas?

Cheers

Update

This is how I do it for now:

这就是我现在这样做的方式:

In my template I make a directive that opens up the modal.
Example:

在我的模板中,我制作了一个打开模态的指令。例:

<my-modal
        on-update="ctrl.OnDialogUpdate">
</my-modal>

So basically the directive calls my modal and when the modal closes or wants to return with a result, it calls the method specified in the directive parameter.

所以基本上该指令调用我的模态,当模态关闭或想要返回结果时,它调用指令参数中指定的方法。

This is how the directive could look:

这是指令的外观:

(function() {

'use strict';

angular.module('app').directive('myModal',myModal);

function myModal(){

    return {

        restrict: 'E',

        // The modal callback specified in the directive tag
        scope: {
            onUpdate: '&?'
        },

        replace: true,

        // This is the template for the directive, not the modal
        templateUrl: 'button.html',

        controllerAs: 'ctrl',

        bindToController: true,

        compile: function (element, attrs) {

            return function (scope, element, attrs) {

            };
        },


        /*@ngInject*/
        controller: function($scope, $log, $aside){

            var self = this;

            var myDialog = $aside({

                // Dialog template
                template: 'my-modal.template.html',
                show: false,
                animation: 'am-fade-and-slide-right',
                placement: 'right',
                backdrop: true,
                html: true,
                container: '',
                scope: $scope
            });


            // Opens modal
            self.ShowDialog = function(){
                myDialog.$promise.then(function() {
                    myDialog.show();
                })
            };


            // Expose Update() method to the dialog template
            $scope.Update = function(){

                if(angular.isFunction(self.onUpdate) ) {

                    self.onUpdate()();
                }

            }

        }
    }

}

})();

2 个解决方案

#1

Just use the 'controller' option:

只需使用'controller'选项:

$scope.showModal = function() {
  $modal({
    title: 'My Title', 
    content: 'My Content', 
    show: true,
    controller: 'ModalCtrl'
  });
};

Here's a plnkr

这是一个plnkr

#2

You can also try to use:

您也可以尝试使用:

var modal= $modal({
            templateUrl: '.../../xxx.modal.html',
            show: false,
            backdrop: 'static',
            controller: 'anyCtrl as vm'
        });

In this case your modal dialog will have the scope of the "anyCtrl" Controller. In the template you can just use vm.title or other properties which are defined in the controller.

在这种情况下,模态对话框将具有“anyCtrl”控制器的范围。在模板中,您可以使用vm.title或控制器中定义的其他属性。

#1