从 Angular 控制器显示引导模式对话框

Question

我正试图弄清楚如何从我的 Angular 控制器中呈现引导模式对话框。基本上我所拥有的是一张桌子。当用户单击表格行时，我想显示一个模式对话框，其中包含有关所选行的详细信息。

我正在考虑解决此问题的方法是让每个表格行响应 ng-click。 ng-click 将调用控制器中的一个函数，该函数将显示模态对话框并将其传递给它需要显示的数据。

我知道如何从视图本身显示模态对话框，但我不确定如何从控制器触发模态对话框。有什么想法吗？

用于视图的控制器具有以下函数，当用户选择一行以查看模式对话框时将调用该函数。

$scope.rowClicked = function(rowID){
    $scope.dataForModal = Data.get(rowID, function(err,data){
        //Here is where I'd like to display the modal dialog in the view
    });
}

Answer 1

见http://angular-ui.github.io/bootstrap/#/modal

在视图中的单元格/行上使用ng-click="showDetails(item)"。然后在您的控制器中使用此代码来显示模态：

$scope.showDetails = function (item) {
    var modalInstance = $modal.open({
        templateUrl: 'yourview.html',
        controller: 'DetailModalController',                       
        resolve: {
            item: function () {
                return  item;
            },                            
        }
    });

    modalInstance.result.then(function (item) {
        // ok
    }, function () {
        // dismiss
    });
};

您的模态控制器可以是这样的：

angular.module('app').controller('DetailModalController', [
    '$scope', '$modalInstance', 'item',
    function ($scope, $modalInstance, item) {

        $scope.item = item;

        $scope.dismiss = function () {
            $modalInstance.dismiss();
        };

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

使用$modalInstance.close($scope.item);，您可以传递一个对象。使用$modalInstance.dismiss();，您可以在没有对象的情况下关闭模式。