twitter-bootstrap - 如何使用 Angular JS 填充模态数据？

Question

我有一个当前在 Bootstrap 中打开的模式，并希望通过 Angular 加载它。由于各种原因，我不能使用Angular UI ，所以这个答案虽然很好，但无济于事。

目前，我正在加载模式： <div class="control-btn"><a href="#myModal" data-toggle="modal">Load</a></div>

但这并没有将我需要的数据传递给模态。

任何帮助将不胜感激

Answer 1

这是我一直在做的事情。
首先，创建一个角度模板，作为您的模态弹出窗口。将其保存为一个名为“modalTemplate.html”的 html 文件，在您的网站目录中的某处。

<script type="text/ng-template" id="modalTemplate.html">
  <h4>welcome to my modal</h4>
  <div>
    {{someData}}
    {{someOtherData}}
  </div>
</script>

接下来，创建一个单独的控制器来管理这个模板：

MyApp.app.controller("testModalCtrl", ['$scope', 'dialog', 'dataForTheModal', 'otherDataForTheModal',
             function testModalCtrl($scope, dialog, dataForTheModal, otherDataForTheModal) {
    $scope.someData = dataForTheModal;
    $scope.someOtherData = otherDataForTheModal;

    $scope.someActionOnTheModal = function () {
        //do whatever work here, then close the modal
        $scope.dataResultFromTheModal = 'something that was updated' 
        dialog.close(dataResultFromTheModal); // close this modal
    };
}]);

从您的原始控制器中调用模态：

$scope.openModal = function () {
        var d = $dialog.dialog({
            templateUrl: 'modalTemplate.html',
            controller: 'testModalCtrl',
            resolve: {
                dataForTheModal: function () {
                    return 'this is my data';
                },
                otherDataForTheModal: function () {
                    return 'this is my other data';
                }
                //pass as many parameters as you need to the modal                    
            }
        });
        d.open()
            .then(function (dataResultFromTheModal) {
                if (dataResultFromTheModal) {
                    $scope.something = dataResultFromTheModal     
                    /*when the modal is closed, $scope.something will be updated with                     
                    the data that was updated in the modal (if you need this behavior) */
                }
            });
    };

为此，您还需要注入$dialog主控制器。（就像我在上面的 testModalCtrl 控制器上一样）

最后，在页面底部包含模板 html：

<div ng-include src="'pathToYourTemplateFile/modalTemplate.html'"></div>  

我喜欢做这样的模态，因为将每个模态存储为单独的模板文件可以使事情井井有条并保持页面标记干净。此外，这使得在整个应用程序中重复使用模式变得容易。