Angularjs：如何将特定数据传递给模态

Question

我正在努力展示嵌套式的＆＃39;我的模态中的[array]数据。我可以在我的视图页面上看到我的所有数据都是从角度的网址中获取的。但是，当我点击相同的元素以弹出模态以查看模态上的相同信息时，我无法看到一些信息。在这种情况下，我无法让员工或开发人员。

url以角度

获取代码

brew rm openssl
brew cleanup openssl
brew install openssl

我的模态模板中使用的

**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> 出现在＆＃39;正常＆＃39;页。

然而，当我employees上面的卡片弹出模态时，除了员工之外，上面显示的所有其他内容（此处未显示）都会弹出。这可能是路由问题吗？

基本上一切都在模板视图上完美无缺，直到我弹出模态。这是＆＃34;模式弹出＆＃34;代码;

ng-click="editProject(data)"

$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中是否有遗失的承诺？

同时在chrome devtools中，resolve似乎被选中了。如下图所示;

然而，当我打开对象时，有趣的是它说数组是空的;

我是角色和网络开发的新手。如果您需要我透露我的后端或您认为缺少的任何其他代码，请告诉我。我只是认为它是一个有角度的问题。谢谢你的帮助。

Answer 1

您需要将 projects 作为依赖注入传递给模态实例控制器：

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

请注意，控制器名称与controllerAs属性一起传递，而不是在HTML模板中传递。

plunker：https://plnkr.co/edit/wLI0pa07UNhr9Ld8CSg3?p=preview