AngularJs UI Modal 没有 $scope 和额外的 ModalController（解决）答案

【问题标题】：AngularJs UI Modal without $scope and extra ModalController (resolve)AngularJs UI Modal 没有 $scope 和额外的 ModalController（解决）
【发布时间】：2018-09-17 00:30:25
【问题描述】：

我想在 AngularJS 中实现 UI Modal 而不使用 $Scope 并且不实现 ModalController(resolve)。
我没有在我的控制器中使用 $scope。我正在使用 vm = this。所以我不知道在打开模态时要为范围分配什么值。
我也不想使用 resolve，因为它涉及创建一个更多的 Controller。

请在下面找到我的代码：任何帮助将不胜感激。

HTML

<script type="text/ng-template" id="modaltemplate.html">
    <div class="modal-header">
        <h3>Modal Header</h3>
    </div>

    <div class="modal-body">
        <p>Modal Body</p>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="vm.close()" data-dismiss="modal">Close
        </button>
    </div>
</script>

CONTROLLER查看 $uibModal.open() 函数中的作用域。

angular
    .module("app", ["ui.bootstrap"])
    .controller("MyController", MyController)

MyController.$inject = ["$uibModal"];

function MyController($uibModal) {

    var vm = this;
    vm.open = open;
    vm.close = close;

    function open() {
        vm.modalInstance = $uibModal.open({
            templateUrl: 'modaltemplate.html',
            scope: //what should I assign here, I dont want to use $scope. Or in other words, I want to assign 'vm' here.
        });
    }

    function close() {
        //This function is not getting called as it does not understand the vm.
    }
}

我尝试了以下方法：

在 HTML 中，设置 ng-controller="MyController as vm"。
还尝试在 $uibModal.open() 函数中为范围、控制器和控制器设置各种值。

但似乎没有任何效果。谁能帮帮我。

【问题讨论】：

您已经消除了所有用于避免使用 $scope 的选项。所有替代方案都要求您创建自己的模态控制器。
你的意思是说有了这个编码结构，就必须创建模态控制器？而且没有办法解决它。对吗？
是的，我就是这个意思。
好的。谢谢您的帮助。 :)

标签： angularjs angular-ui-bootstrap

【解决方案1】：

如果你对Close函数有问题，你可以设置$dismiss()来关闭模态实例，也可以在$dismiss函数中传递参数以供进一步使用，试试这个：

<script type="text/ng-template" id="modaltemplate.html">
    <div class="modal-header">
        <h3>Modal Header</h3>
    </div>

    <div class="modal-body">
        <p>Modal Body</p>
    </div>

    <div class="modal-footer">
        <button type="button" class="btn btn-default" ng-click="$dismiss('cancel')" data-dismiss="modal">Close
        </button>
    </div>
</script>

【讨论】：

谢谢@Hasan。这正是我一直在寻找的。 :)

【解决方案2】：

您可以在主控制器中创建一个新范围

var modalScope = $scope.$new();

在新范围（或整个虚拟机）上分配您需要的内容：

modalScope.vm = vm;

然后将其分配为模态范围：

vm.modalInstance = $uibModal.open({
    templateUrl: 'modaltemplate.html',
    scope: modalScope
});

只需确保在关闭/销毁模式时清除它

modalScope.vm = null;

【讨论】：