尝试打开 uib 模态实例时未定义绑定

Question

我们使用 angular 版本 1.5.10 和 ui-router 版本 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);

从此项目组件中使用的项目服务 -

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

我试图打开没有数据打开的模式弹出窗口。当我们调试代码时，绑定中的数据在 ProjectTaskdetailComponent 中未定义，而在模板中我们传递为data = "$resolve.data"。如果我们在模板中使用$resolve = "$resolve"，在我们签入 ProjectTaskdetailComponent 时仍然数据未定义。

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

还尝试将 angular-ui-router 更新到 0.4.2 版本，但还是不行。

Answer 1

尝试在您的uibModal.open 中使用component 而不是template。

来自docs：

component (Type: string, Example: myComponent) - 对要渲染的组件的字符串引用，该组件在 Angular 的编译器中注册。如果使用指令，该指令必须具有限制：'E' 和模板或模板Url 集。

它支持这些绑定：

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

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

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

resolve - 模态解析值的对象。有关详细信息，请参阅 UI 路由器解析。

所以在你的情况下，它可能看起来像：

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'
};