1

現在、Bootstrap で開くモーダルがあり、Angular 経由でロードしたいと考えています。さまざまな理由でAngular UIを使用できないため、この回答は素晴らしいものですが、役に立ちません。

現在、私はモーダルを次のようにロードしています: <div class="control-btn"><a href="#myModal" data-toggle="modal">Load</a></div>

しかし、それは必要なデータをモーダルに渡していません。

どんな助けでも大歓迎です

4

1 に答える 1

3

これが私がやってきたことです。
まず、モーダル ポップアップとなる角度テンプレートを作成します。これを「modalTemplate.html」という名前の html ファイルとして Web サイト ディレクトリのどこかに保存します。

<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>

各モーダルを個別のテンプレート ファイルとして保存すると、物事が整理され、ページのマークアップがきれいに保たれるため、私はこのようなモーダルを行うのが好きです。さらに、これにより、アプリ全体でモーダルを簡単に再利用できます。

于 2013-09-18T15:02:57.470 に答える