javascript - Angularjs:如何将特定数据传递给模态

Question

我很难在我的模式中显示“嵌套”[数组] 数据。我能够在我的 View 页面上看到从 url 中获取的所有数据。但是，当我 ng-click 相同的元素以弹出模态以查看模态上的相同信息时，我看不到某些信息。在这种情况下，我不能让员工或开发人员。

angular中的url抓取代码

**controller used is 'HomeController'
**/comments is where my json data is located with 'employees' 
being a one-to-many relationship entity in my backend (which might be the issue in my head)

var vm = this;
vm.projects = [];
$http.get('/comments')
    .then(function(result) {
        console.log(result);
        vm.projects = result.data; 
     });

data 在我的模态模板中使用(不是模态中的工作代码)

    <div ng-repeat="data in controller.projects">
        <ul ng-repeat="employee in data.employees">
            {{employee.name}}
        </ul>
    </div>

controller来自<div ng-controller="HomeController as controller">

这个我也试过；

    <div ng-repeat="employee in Project.Employees" class="selected-item">
        {{employee.name}}
    </div>

但不起作用!

如下所示，employees显示在“正常”页面上。

然而，当我ng-click="editProject(data)"上面的卡片弹出模态，上面显示的所有其他内容(此处未显示)都会弹出，但员工除外。会不会是路由问题？

基本上，在我弹出模式之前，模板 View 上的一切都完美无缺。这是“模态弹出”代码；

$scope.editProject = function(data) {
    $scope.showSelected = true;
    $scope.SelectedProject = data;
    var fromDate = moment(data.start).format('DD/MM/YYYY LT');
    var endDate  = moment(data.end).format('DD/MM/YYYY LT');

    $scope.Project = { 
        ProjectID : data.projectID, 
        Client : data.client,
        Title : data.title,
        Description: data.description,
        Employees: data.employees,
        StartAt : fromDate,
        EndAt : endDate,
        IsFullDay : false
    }

     $scope.ShowModal()
},

//This function is for show modal dialog
$scope.ShowModal = function(){
    $scope.option = {
        templateUrl: 'modalContent.html',
        controller: 'modalController',
        backdrop: 'static',
        resolve: {
            Project : function () { 
                return $scope.Project;
            },
            SelectedProject : $scope.SelectedProject                  
        }
    };

ShowModal 中是否有我遗漏的 promise ？ resolve ？

同时在 chrome devtools 中，employees如下图所示，似乎已被“捡起”；

但是当我打开对象时，有趣的是它说数组是空的；

一般来说，我是 Angular 和 Web 开发的新手。如果您需要我透露我的后端或您认为缺少的任何其他代码，请告诉我。我只是认为这是一个 Angular 问题。感谢您的帮助。

Answer 1

您需要将项目作为依赖注入(inject)传递给模态实例 Controller :

angular.module('ui.bootstrap.demo').controller('ModalInstanceCtrl',   function ($uibModalInstance, projects) {
  var $ctrl = this;
  $ctrl.projects = projects;

  $ctrl.ok = function () {
    $uibModalInstance.close();
  };

  $ctrl.cancel = function () {
    $uibModalInstance.dismiss();
  };
});

并在你的打开函数中解决它:

angular.module('ui.bootstrap.demo').controller('ModalDemoCtrl', function ($http, $uibModal, $log, $document) {
  var $ctrl = this;

  $http.get('data.json').then(function(result) {
    console.log(result);
    $ctrl.projects = result.data; 
  });

  $ctrl.open = function (size, parentSelector) {
    var parentElem = parentSelector ? 
      angular.element($document[0].querySelector('.modal-demo ' + parentSelector)) : undefined;
    var modalInstance = $uibModal.open({
      ariaLabelledBy: 'modal-title',
      ariaDescribedBy: 'modal-body',
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      controllerAs: '$ctrl',
      size: size,
      appendTo: parentElem,
      resolve: {
        projects: function () {
          return $ctrl.projects;
        }
      }
    });
  };
});

另请注意， Controller 名称是通过 controllerAs 属性传递的，而不是在 HTML 模板中。

笨蛋:https://plnkr.co/edit/wLI0pa07UNhr9Ld8CSg3?p=preview