在单个控制器中生成一个对话框。 Angular.js

Question

我根据教程制作了这段代码。我想知道如何使用单个控制器。我想生成这个对话框，只使用一个控制器。

http://fiddle.jshell.net/adnu6mmt/2/?utm_source=website&utm_medium=embed&utm_campaign=adnu6mmt

在这个项目中，我目前使用 2 个控制器。谢谢。

Answer 1

您需要保存模态实例并在同一个控制器中使用它。首先，您需要像这样更改您的 html：

<div ng-app="myApp">
    <script type="text/ng-template" id="myModal.html">
    <div class="modal-header">
        <h3 class="modal-title">Modal title</h3>
    </div>
    <div class="modal-body">
        Modal content
    </div>
    <div class="modal-footer">
        <button class="btn btn-primary" ng-click="close(true)">OK</button>
        <button class="btn btn-warning" ng-click="close(false)">Cancel</button>
    </div>
</script>

<div ng-controller="MyCtrl">
    <input type="button" value="Show modal" ng-click="showModal()"/>
</div>

然后在你的控制器中：

.controller("MyCtrl", function($scope, $modal) {

    var modalInstance = null;

    $scope.close = function (ok, hide) {
        if(ok) {
            alert('ok');
        } else {
            alert('cancel');
        }

        modalInstance.dismiss();
    };

    var modalScope = $scope.$new();

    $scope.showModal = function() {    
         modalInstance = $modal.open({
             templateUrl: 'myModal.html',
             scope: modalScope
         });
    }
});

当您想在同一个控制器中控制模态框时，您需要对其进行访问，请注意我们将$modal 的结果存储在一个变量中以供以后使用。

这相当于将modalInstance 注入到另一个控制器，让您可以访问该对象上的close、dismiss 或其他功能。