Question

我们正在使用角度版本1.5.10和ui路由器版本0.3.1。我们正在将我们的控制器和服务组件化。

当我们尝试使用$uibModal.open方法打开模式弹出窗口时。它在模式弹出窗口中打开组件的模板。但是，它没有显示使用resolve

传递给在模式中打开的控制器的任何数据

我们必须调用的项目组件如下-

import * as angular from 'angular';

export let ProjectComponent = {
    selector: 'ProjectDetails',
    templateUrl: 'app/entities/project-details/project-details.html',
    bindings: {},
    controller: ProjectController,
    controllerAs: 'vm'
};

ProjectController.$inject = ['project', '$http', '$scope', '$filter', '$uibModal', 'Record'];

function ProjectController(project, $http, $scope, $filter, $uibModal, Record) {

var vm = this;
var modalInstance = $uibModal.open({
    template: '<project-task-details $resolve="$resolve" ></project-task-details>',
    backdrop: 'static',
    windowClass: 'viewerModal style-1',
    size: 'lg',
    resolve: {
        data: function() {
            return project.getTaskDetails({
                projectId: projectId
            });
        }
    }
  });
}    

angular
    .module('projectApp')
    .component(ProjectComponent.selector, ProjectComponent);

正在使用此Project组件的Project Service-

import * as angular from 'angular';
class project {
    constructor($http) {
        this.$http = $http;
    }

    getTaskDetails(params) {
        return this.$http.get('api/project' + '/' + params.projectId).success((response) => response.data);
    }

}
angular
    .module('projectApp')
    .service('project', project);

project.$inject = ['$http'];
export default project;

现在我们要加载的页面内容，即ProjectTaskDetailComponent：-

import angular from 'angular';

export let ProjectTaskDetailComponent = {
    selector: "projectTaskDetails",
    templateUrl: 'app/entities/project-details/project-task-details.html',
    bindings: {
        //  modalInstance: '<',
        data: '<'
    },
    controller: ProjectTaskDetailController,
    controllerAs: 'vm'
};


ProjectTaskDetailController.$inject = [];

function ProjectTaskDetailController() {

    var vm = this;
    vm.$onInit = function() {
        vm.projectDetail = this.data;
    }
    // vm.projectDetail = data;
    vm.clear = clear;
    setTimeout(function() {
        $('#loadingImg').css('display', 'none');
    }, 1000);

    function clear() {

        // $uibModalInstance.dismiss('cancel');
    }
}

angular
    .module('projectApp')
    .component(ProjectTaskDetailComponent.selector, ProjectTaskDetailComponent);

我试图打开不带数据的模式弹出窗口。当我们调试代码时，当在模板中以data = "$resolve.data"的形式传递时，ProjectTaskdetailComponent中的绑定中的数据未定义。如果我们在模板中使用$resolve = "$resolve"，则在检入ProjectTaskdetailComponent时，静止数据仍未定义。

还尝试了像data: "<", data: "=", data: "@"这样的所有绑定，但是仍然存在相同的问题，即数据未定义。

还尝试将angular-ui-router更新为0.4.2版本，但仍然无法正常工作。

Answer 1

尝试在您的component中使用template代替uibModal.open。

来自docs：

component（类型：字符串，示例：myComponent）-对要渲染的组件的字符串引用，该字符串已在Angular的编译器中注册。如果使用指令，则该指令必须具有以下限制：“ E”并设置了template或templateUrl。

它支持以下绑定：

close-一种可用于关闭模式并传递结果的方法。结果必须以以下格式传递：{$ value：myResult}

dismiss-一种可用于消除模态并传递结果的方法。结果必须以以下格式传递：{$ value：myRejectedResult}

modalInstance-模态实例。这与使用控制器时发现的$ uibModalInstance可注入对象相同。

resolve-模态解析值的对象。有关详细信息，请参见UI Router解析。

因此，在您的情况下，它可能类似于：

var modalInstance = $uibModal.open({
    component: 'projectTaskDetails',
    backdrop: 'static',
    windowClass: 'viewerModal style-1',
    size: 'lg',
    resolve: {
        data: function() {
            return project.getTaskDetails({
                projectId: projectId
            });
        }
    }
  });
}

编辑：您的组件绑定将需要符合其api，因此应如下所示：

export let ProjectTaskDetailComponent = {
    selector: "projectTaskDetails",
    templateUrl: 'app/entities/project-details/project-task-details.html',
    bindings: {
        modalInstance: '<',
        resolve: '<'
    },
    controller: ProjectTaskDetailController,
    controllerAs: 'vm'
};

尝试打开uib模式实例

1 个答案: