我怎么能填充角度JS模态数据？ [英] How can I populate Modal data with Angular JS?

问题描述

我在引导当前打开一个模式，并希望通过角加载它。我不能使用角UI 由于种种原因，所以<一个href=\"http://stackoverflow.com/questions/11183414/creating-a-modal-window-to-load-data-with-angular-js\">this回答，而伟大的，于事无补。

I have a modal that opens in Bootstrap currently and want to load it via Angular. I can't use Angular UI for various reasons, so this answer, while great, doesn't help.

目前，我加载模态有：
＆LT; D​​IV CLASS =控制BTN＆GT;＆LT; A HREF =＃myModal数据切换=模式＆GT;负载和LT; / A＆GT;＆LT; / DIV＆GT;

Currently, I'm loading the modal with: <div class="control-btn"><a href="#myModal" data-toggle="modal">Load</a></div>

但是，这是不及格，我需要模态数据。

But that isn't passing the data that I need to the modal.

任何帮助将大大AP preciated

Any help would be greatly appreciated

推荐答案

这是我一直在做。结果
首先，创建一个角模板，这将是你的模式弹出。保存为名为modalTemplate.html的地方在您的网站目录中的HTML文件。

Here is what i have been doing.
First, create an angular template that will be your modal popup. Save this as an html file named "modalTemplate.html" somewhere in your website directory.

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

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

Next, create a separate controller to manage this template:

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
    };
}]);

从原来的控制器调用，像这样的模式：

Call the modal like so from your original controller:

$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) */
                }
            });
    };

对于这个工作，你还需要注入 $对话到主控制器。 （就像我上面的testModalCtrl控制器）

For this to work, you also need to inject $dialog into your main controller. (just like I have on the testModalCtrl controller above)

最后，包括您的页面底部的HTML模板：

Finally, include the template html at the bottom of your page:

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

我喜欢做模态就是这样，因为每个存储模式作为一个单独的模板文件保持组织的事情，让你的网页标记干净。此外，这使得整个应用程序可以轻松地重新使用模态。

I like doing modals like this, because storing each modal as a separate template file keeps things organized and keeps your page markup clean. Additionally, this makes it easy to re-use modals throughout your app.

这篇关于我怎么能填充角度JS模态数据？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！