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

Question

我正努力在我的模态中显示'嵌套'[数组]数据。我可以在我的视图页面上以角度查看从网址中获取的所有数据。但是，当我点击相同的元素弹出模式以查看模式中的相同信息时，我看不到一些信息。在这种情况下，我不能雇员或开发人员。在角

**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在我的模式模板中使用

URL抓取代码（不工作模态代码）

<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)"上述卡弹出模式，一切如上图所示（下面这里没有显示），除了员工弹出。这可能是一个路由问题？

基本上，直到我蹦出来的模态一切都运行完美的模板视图。这是“模式弹出”代码;

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

莫不是我缺少的ShowModalresolve一个承诺？

同时在chrome devtools中，employees似乎已被“拾取”，如下所示;

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

我一般是新的角度和web开发。如果您需要我透露我的后端或任何其他您认为不存在的代码，请告诉我。我只是认为这是一个尖锐的问题。谢谢你的帮助。

Answer 1

你需要传递项目依赖注入到你的模态例如控制器：

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