在angularJS中调用第二个HTML页面的模态对话框中的第一个HTML页面

时间:2014-10-24 03:56:03

标签: angularjs modal-dialog

我有控制器,路由器,服务和视图的文件夹结构

study/controller.js
      router.js
      service.js

files/controller.js
      router.js
      service.js

view/files.html
     study.html

研究和文件HTML视图使用其文件夹中定义的相应JS文件。我有一个独特的案例,在研究视图页面内,我启动了一个模态对话框,必须显示文件视图HTML页面。在文件视图页面上,用户选择一个文本,然后该文本需要显示在学习视图的模态对话框的文本中。

文件控制器如下所示

myapp.controller('FileController', ['$rootScope', '$scope', '$routeParams', '$location', '$filter', 'resolvedFile', 'FileService',
function ($rootScope, $scope, $routeParams, $location, $filter, resolvedFile, FileService) {
    if (angular.isArray(resolvedFile)) {
        resolvedFile.$promise.then(function(files) {
            $scope.files = files;
        });
    }

}]);

文件路由器的定义如下所示

myApp
.config(['$routeProvider', '$httpProvider','$translateProvider', 'USER_ROLES',
    function ($routeProvider, $httpProvider, $translateProvider, USER_ROLES) {
        $routeProvider
            .when('/files', { // listing files
                templateUrl: 'views/files.html',
                controller: 'FileController',
                resolve:{
                    resolvedFile: ['$route', 'FileService', function ($route, FileService) {
                        return FileService.files.query();
                    }]
                },
                access: {
                    authorizedRoles: [USER_ROLES.all]
                }
            })
    }]);

在研究视图中,我使用ng-class =" modal fade"弹出一个模态对话框。然后modal有一个标题和一个正文。我现在最大的问题是如何在这个模态对话框中显示文件视图。这就是我到目前为止的尝试方式。这是研究控制器代码

$scope.openFileChoser = function(){
        var modalInstance = $modal.open({
            templateUrl: 'views/files.html',
            controller: 'FileController',
            resolve: {
                resolvedFile : function () {
                    return FileService.files.query();
                }
            }
        });
    }

问题是,一旦你进入学习控制器模态代码,你如何使files.html调用FileService。

1 个答案:

答案 0 :(得分:0)

我猜这是因为你的FileController配置中有相同的控制器$routeProvider具有不同的解析参数,在一种情况下是resolvedFile而在另一种情况下是{{1} }}。 Angular期望结果是一致的。因此,要么使用不同的控制器,要么在每个路径中添加files