При попытке открыть модальный экземпляр UIB привязки не определены - PullRequest
Новая
       9

При попытке открыть модальный экземпляр UIB привязки не определены

0 голосов
/ 03 января 2019

Мы используем угловую версию 1.5.10 и ui-router версию 0.3.1.Мы составляем компонент нашего контроллера и сервисов.

Когда мы пытаемся открыть модальное всплывающее окно, используя метод $uibModal.open.Это открытие шаблона компонента в модальном всплывающем окне.Но он не показывает какие-либо данные, переданные в контроллер, открытый в модальном режиме, используя resolve

Project Компонент, из которого мы должны вызвать, выглядит следующим образом - 

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Служба, которая используется из этого компонента проекта - 

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, но он все равно не работал.

1 Ответ

0 голосов
/ 07 января 2019

Попробуйте использовать component вместо template в вашем uibModal.open.

Из документов :

(Тип: строка,Пример: myComponent) - строковая ссылка на отображаемый компонент, который зарегистрирован компилятором Angular.При использовании директивы директива должна иметь ограничение: 'E' и набор template или templateUrl.

Поддерживаются следующие привязки:

close - метод, который можно использовать для закрытия модального, передавая результат.Результат должен быть передан в следующем формате: {$ value: myResult}

dismiss - метод, который можно использовать для отклонения модального режима, передавая результат.Результат должен быть передан в следующем формате: {$ value: myRejectedResult}

modalInstance - Модальный экземпляр.Это то же самое, что вводится $ uibModalInstance при использовании контроллера.

resolv - объект значений модального разрешения.См. 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'
};
...