2013-06-27 27 views
5

リピーターを使用して特定のユーザーの情報を構築する情報画面があります。AngularJS - オブジェクトデータをモーダルに渡す

「編集」ボタンをクリックすると、どのようにして特定のユーザーオブジェクトデータをモーダルウィンドウテンプレートに渡すことができますか?

HTML

<form class="custom" ng-controller="DepCtrl" ng-cloak class="ng-cloak"> 
<fieldset ng-repeat="object in data.dataset"> 
<legend><span>{{ object.header }}</span><span class="dep_rel">({{ object.relation }}) </span></legend> 
    <div class="row"> 
     <div class="four columns" ng-repeat="o in object.collection.inputs"> 
      <span class="table_label">{{ o.label }}:</span><span class="table_answer">{{ o.value }}</span><br> 
     </div> 
    </div> 
    <div class="row"> 
     <a ng-click="openDialog('edit')" style="color:#444;text-decoration:none;margin-right:10px;margin-top:5px;" class="btn_gray smaller left" href="#">Edit</a> 
     <a style="color:#444;text-decoration:none;margin-top:5px;" class="btn_gray smaller" href="#">Delete</a>  
    </div> 
</fieldset> 
</form> 

JS

function DepCtrl($scope, Dependents, $dialog) { 
$scope.data = Dependents; 

var t = '<div class="modal-header">'+ 
     '<h3>' + $scope.header.value + '</h3>'+ 
     '</div>'+ 
     '<div class="modal-body">'+ 
     '<p>Enter a value to pass to <code>close</code> as the result: <input ng-model="result" /></p>'+ 
     '</div>'+ 
     '<div class="modal-footer">'+ 
     '<button ng-click="close(result)" class="btn btn-primary" >Close</button>'+ 
     '</div>'; 

$scope.opts = { 
backdrop: true, 
keyboard: true, 
dialogFade: true, 
backdropClick: false, 
template: t, // OR: templateUrl: 'path/to/view.html', 
controller: 'TestDialogController' 
}; 

$scope.openDialog = function(action){ 
var d = $dialog.dialog($scope.opts); 
//if (action === 'edit') { $scope.opts.templateUrl = '../../modal.html'; } 
d.open().then(function(result){ 
    if(result) 
    { 
    alert('dialog closed with result: ' + result); 
    } 
}); 
}; 
} 

答えて

9

それは$ダイアログがコアAngularJSのAPIの一部ではないので、あなたは、正確に言及されている$ダイアログサービスを知るのに役立ちます。 ui-bootstrapの$ダイアログサービスを使用していると仮定すると、ダイアログオブジェクトに$ dialog構成オブジェクトのresolveプロパティを使用してユーザーオブジェクトを渡すことができます。

決意:解決と 地元の人々の約束が解決されない場合はどうすれば

function DepCtrl($scope, Dependents, $dialog) { 
    $scope.data = Dependents; 

    $scope.opts = { 
    backdrop: true, 
    keyboard: true, 
    dialogFade: true, 
    backdropClick: false, 
    template: t, // OR: templateUrl: 'path/to/view.html', 
    controller: 'TestDialogController', 
    resolve: { 
     user: function(){ 
     return $scope.data; 
     } 
    } 
    }; 

    $scope.openDialog = function(action){ 
    var d = $dialog.dialog($scope.opts); 
    d.open(); 
    }; 

} 

/** 
* [TextDialogController description] 
* @param {object} $dialog instance 
* @param {mixed} user User object from the resolve object 
*/ 
function TextDialogController(dialog, user){ 
    ... 
} 
+0

としてコントローラに渡されますメンバー$dialog documentationよう

は、それを述べ?私はダイアログが開かないと思いますが、その場合、拒否された約束をどのように処理するのかカスタムコードを実行できますか?例:トーストや何かを見せてください。 – vivek

関連する問題