Question

这是我的应用程序，尝试使用UI模式，但是当模态函数无法找到html模板时。我可以在函数内部控制日志，但无法打开模态视图。

 var app = angular.module('myApp', [
        'angularUtils.directives.dirPagination',

    'ui.bootstrap'
    ]);


    app.controller('galleryCtrl', ['$scope', '$http', function ($scope, $http) {

    }]).
    controller('ModalInstanceCtrl',['$scope','$modal',function($scope, $modalInstance){

    }]).
    directive('myGallery', function ($http,$modal) {
        return {
            restrict: 'E',
            scope: {
                feed: '@',
                search: '=?',
                resultsPerPage: "=?",
                sorting: "=?"
            },
            templateUrl: './MyGallery.tpl.html',
            link: function (scope, element, attrs) {


                scope.search = scope.search || true;
                scope.sorting = scope.sorting || true;
                scope.resultsPerPage = scope.resultsPerPage || 10;

                console.log(scope.resultsPerPage);

                scope.openModal = function() {


                    var modalInstance = $modal.open({
                        templateUrl: '/views/modal.html',
                        controller: 'ModalInstanceCtrl'
                    });
                };

在html中：

<div class="imgs">
    <ul>
        <li dir-paginate="img in imgs
        | filter:query
        | itemsPerPage: resultsPerPage.value || 10 ">
               <a href=""><img ng-src="{{img.url}}" ng-click="openModal()"></a>
        </li>
    </ul>
</div>

这就是我得到的：

 GET http://localhost:63342/views/modal.html 404 (Not Found)

路径100％正确，所以如果你们能看出问题是什么。

Answer 1

只是为了确保..尝试：

templateUrl: 'views/modal.html',

也许您的本地服务器的文档根本不在您认为的位置。

删除初始斜杠，确保路径相对于角项目的根文件夹。

我的Angular ui模态无法找到模板

1 个答案: