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

Question

我们正在使用 angular 版本 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);

正在使用此项目组件的项目服务 -

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

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

来自docs：

component (Type: string, Example: myComponent) - A string reference to the component to be rendered that is registered with Angular's compiler. If using a directive, the directive must have restrict: 'E' and a template or templateUrl set.

It supports these bindings:

close - A method that can be used to close a modal, passing a result. The result must be passed in this format: {$value: myResult}

dismiss - A method that can be used to dismiss a modal, passing a result. The result must be passed in this format: {$value: myRejectedResult}

modalInstance - The modal instance. This is the same $uibModalInstance injectable found when using controller.

resolve - An object of the modal resolve values. See UI Router resolves for details.

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

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 模态实例时未定义绑定

Bindings are undefined when trying to open uib modal Instance

angularjs

angular-ui-bootstrap

angular-ui-router