ngDialog ライブラリの使用に加えて、ng-repeat を使用して Firebase からユーザー オブジェクトを設定しています。私の目標は、「表示」ボタンをクリックすると、ユーザーの詳細を表示できる小さなダイアログがポップアップすることです。ただし、ngDialog のドキュメントに従おうとしていますが、ポップアップ テンプレートが式をレンダリングしていません。
データ・モデル:
{
"members": {
"-JWT5y43YFy1mGirVVS2": {
"date": 1410328158691,
"firstname": "Michael",
"image": "http://telehealth.org/wp-content/images/user-placeholder.jpg",
"upcoming": "PTO on Thursday",
"status": {
"color": "red",
"contact": {
"email": "test@email.com",
"yahoo": "yahooIM"
},
"projects": {
"projectone": "project one",
"projecttwo": "project two",
"projectthree": "project three",
"projectfour": "project four",
"projectfive": "project five",
"projectsix": "project six",
"projectseven": "project seven",
"projecteight": "project eight",
"projectnine": "project nine",
"projectten": "project ten"
}
}
},
"-JWT65QvjwD4TSFjDx4V": {
"date": 1410328192928,
"firstname": "Magic",
"image": "http://telehealth.org/wp-content/images/user-placeholder.jpg",
"upcoming": "PTO on Thursday",
"status": {
"color": "yellow",
"contact": {
"email": "test@email.com",
"yahoo": "yahooIM"
},
"projects": {
"projectone": "project one",
"projecttwo": "project two",
"projectthree": "project three",
"projectfour": "project four",
"projectfive": "project five",
"projectsix": "project six",
"projectseven": "project seven",
"projecteight": "project eight",
"projectnine": "project nine",
"projectten": "project ten"
}
}
}
HTML:
<ul class="cbp-rfgrid" ng-repeat="member in members">
<li class="{{member.status.color}}">
<div class="dripicon profilephoto"></div>
<div>
<h3>{{member.firstname}}</h3>
<div class="dripicon actions"
ng-click="viewStatus()"></div>
<div class="dripicon actions"
ng-click="editStatus()"></div>
</div>
</li>
</ul>
コントローラ:
myApp.controller('MembersController', function($scope, $firebase, $location, ngDialog){
var ref = new Firebase('https://scrumcheck.firebaseio.com/members');
var members = $firebase(ref);
$scope.members = members.$asObject();
$scope.viewStatus = function(){
ngDialog.open({ template: 'views/popupTmpl.html' });
}
$scope.editStatus = function(){
//not entered yet
}
});
popupTmpl.html
<p>External modal template with external scope: <code>{{member.firstname}}</code></p>
「表示」ボタンをクリックして viewStatus() 関数をトリガーすると、{{member.firstname}} に対して何も表示されません。
再度、感謝します!