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

Question

我正在努力寻找将 Angular-Strap modal/aside 与控制器一起使用的正确方法。

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

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

});

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

我通常使用 "controllerAs"，因此甚至没有 $scope 来首先注入模态！

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

如果我在模态模板中使用 ng-controller，我可以拥有我的控制器。但是他给了我另一个问题：现在我无法将数据注入模态控制器，而且我的调用代码无法知道模态何时关闭并且 returning 来自模态的数据也变得很麻烦（涉及工厂只是为了保持父子控制器数据同步。

我真的很纠结如何让这个成为最好的方法。

有什么想法吗？

干杯

更新

我现在是这样做的：

在我的模板中，我创建了一个打开模式的指令。
示例：

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

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

指令可能是这样的：

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

            }

        }
    }

}

})();

Answer 1

只需使用 'controller' 选项：

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

Here's a plnkr

Answer 2

您也可以尝试使用：

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

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

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

How to use Angular-Strap to create a modal with a controller?

angularjs

modal-dialog

angular-strap