Question

我有一个当前在Bootstrap中打开的模态，并希望通过Angular加载它。我出于各种原因无法使用Angular UI，所以this answer虽然很棒，却无济于事。

目前，我正在加载模态： <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>

我喜欢做这样的模态，因为将每个模态存储为单独的模板文件可以保持组织有序并保持页面标记清洁。此外，这使您可以轻松地在整个应用程序中重复使用模式。

如何使用Angular JS填充Modal数据？

1 个答案: