2

ui.bootstrap ( http://angular-ui.github.io/bootstrap/#/modal )を使用して、詳細情報 (コメントなどを含む) を表示するアプリケーションの要素のモーダル ウィンドウ ポップアップを有効にしようとしています。 . 要素はページ上のディレクティブとして読み込まれています。ネストされたスコープで問題が発生していると思いますが、モーダル ウィンドウがトリガーされているように見えますが、何も表示されません (画面がフェードします)。

私のディレクティブは次のようになります。

    .directive('artifactCause', function() {
        return {
            restrict: 'E',
            replace: true,
            scope: {
                thing: '=thing'
            },
            templateUrl: 'views/directives/artifact-cause.html',
            controller: function($scope, $element, $attrs, $modal) {
                console.log('clicked');
                $scope.open = function() {

                    var modalInstance = $modal.open({
                        backdrop: true,
                        keyboard: true,
                        controller: 'artifactModalCtrl',
                        templateUrl: 'views/directives/modal-artifact.html',
                        scope: $scope,
                        resolve: {
                            thing: function () {
                                return $scope.thing.cause_id;
                            }
                        }
                    });

                };
            }
        };
    });

また、artifactModealCtrl コントローラーは次のようになります。

.controller('artifactModalCtrl', function($scope, $http, loggedStatus, thing) {
        var token = loggedStatus.token();
        $scope.close = function(result) {
            dialog.close(result);
        };

        $http.get( REQUEST_URL + '/Artifact/ArtifactDetail?token=' + token + '&artifact_id=' + thing ).
            success(function(data) {
                console.log(data);
                $scope.thing = data.response;
                return data.response;
            }).
            error(function(data) {
                console.log('Error');
                console.log(data);
            });
    })

コンソールにログを記録できるため、ajax 呼び出しから受信したデータが成功していることはわかっています。正しい方向への洞察や指針をいただければ幸いです。

4

1 に答える 1

0

これは、HTML テンプレートが見つからないことが原因である可能性が最も高いです。モーダルが起動して画面がフェードしますが、テンプレートが見つからないため、画面に何も表示されません。

私は個人的に、プロパティでテンプレートのファイルの場所を参照することに成功していないtemplateUrlので、代わりに、html テンプレートをマスターページに含めるか、次のようにモーダルを起動するページを含めます。

<div ng-include src="'../views/directives/modal-artifact.html'">

テンプレートへのパスが正確であることを確認してください。これは、ページの読み込み時に firebug (または同様のブラウザー開発ツール) を介してファイルの内容を表示することで確認できます。

id次に、テンプレート タグの属性が"modal-artifact.html"( ) であると仮定して、次の<script type="text/ng-template" id="modal-artifact.html">ように templateUrl を設定します。

templateUrl: 'modal-artifact.html' //this must match the id of your template
于 2013-10-07T21:37:25.190 に答える