Question

我想在不使用$ Scope且没有实现ModalController（resolve）的情况下在AngularJS中实现UI模式。
我在控制器中没有使用$ 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 =＆＃34; MyController设置为vm＆＃34;。
还尝试在$ uibModal.open（）函数中为范围，控制器和控制器设置各种值。

但似乎没有任何工作。任何人都可以帮帮我。

Answer 1

如果您对关闭功能有问题，可以为关闭模态实例设置$ 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
});

请确保在关闭/销毁模态时清除它

modalScope.vm = null;

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

2 个答案: