$dialog.messageBox 等价物答案

【问题标题】：$dialog.messageBox equivalent$dialog.messageBox 等价物
【发布时间】：2014-07-10 16:37:50
【问题描述】：

使用 Angular 我曾经能够做到这一点

var title = 'title';
var messageBody = 'message';
var buttons = [{ result: 'ok', label: 'OK', cssClass: 'btn-primary' }];
$dialog.messageBox(title, messageBody, buttons).open();

但是现在，$dialog 已经被 $modal 取代了。

在新方案中与上述等价的是什么？

【问题讨论】：

在 modal 指令章节下的documentation 中有很好的描述。

标签： javascript angularjs dialog

【解决方案1】：

使用 $modal：

示例 HTML：

<div>
    <div class="modal-header">
        <h3 class="modal-title">{{data.title}}</h3>
    </div>
    <div class="modal-body">
        {{data.message}}
    </div>
    <div class="modal-footer">
        <button class="btn-primary" ng-click="ok()">Ok</button>
    </div>
</div>

示例 JS：

var MyModalCtrl = function ($scope, $modal) {

    $scope.title = 'I'm a Modal';
    $scope.message = 'Hello World';
    $scope.open = function () {

    var modalInstance = $modal.open({
        templateUrl: '/path/to/html',
        controller: MyModalInstanceCtrl,
        size: 'lg',
        resolve: {
        data: function () {
                return {title: $scope.title, message: $scope.message};
            }
        }
    });

    modalInstance.result.then(function (selectedItem) {
        console.log('Closed');
    });
};

var MyModalInstanceCtrl = function ($scope, $modalInstance, data) {

    $scope.data = data;

    $scope.ok = function () {
        $modalInstance.close();
    };

};

可在此处找到相关文档：http://angular-ui.github.io/bootstrap/

【讨论】：