AngularJs UI 没有 $scope 和额外 ModalController 的模式（解决）

Question

我想在 AngularJS 中实现 UI 模态而不使用 $Scope 并且不实现 ModalController(resolve)。
我没有在我的控制器中使用 $scope。我正在使用 vm = this。所以我不知道在 openinig Modal 时给范围分配什么值。
我也不想使用 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() 函数中为作用域、控制器和控制器设置各种值。

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

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

Answer 2

您可以在主控制器中创建一个新的作用域

var modalScope = $scope.$new();

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

modalScope.vm = vm;

然后将其指定为模态范围：

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

请确保在 closing/destroying 模态

时清除它

modalScope.vm = null;

AngularJs UI 没有 $scope 和额外 ModalController 的模式（解决）

AngularJs UI Modal without $scope and extra ModalController (resolve)

angularjs

angular-ui-bootstrap