Angularjs：特定のデータをモーダルに渡す方法

Question

モーダルに[入れ子にされた] [配列]データを表示しようとしています。私は私のビューページで角度の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で

URLフェッチコード<div ng-controller="HomeController as controller">

Iから

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

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に欠けている約束があるだろうか？

一方、クロムのdevtoolsでは、employeesは以下のように「選択」されているようです。

私はオブジェクトを開くときしかし、興味深いことに、それは配列が空であると言います。

私は、一般的には、角度やウェブ開発に新しいです。あなたが私のバックエンドやあなたが欠けていると思う他のコードを明らかにする必要があるかどうかを教えてください。私はちょうどそれが角の問題だと思っています。ご協力いただきありがとうございます。

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

とあなたのopening関数でそれを解決する：あなたはあなたに依存性注入としてモーダルインスタンスコントローラプロジェクトを渡す必要が

Answer 1

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テンプレート内には存在しません。

プランナー：https://plnkr.co/edit/wLI0pa07UNhr9Ld8CSg3?p=preview