AngularJS - 將對象數據傳遞到模態

Question

我有一個信息屏幕，其中使用中繼器構建特定用戶的信息。

當單擊「編輯」按鈕時，如何將特定用戶對象數據傳遞到模態窗口模板？

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

Answer 1

它有助於瞭解哪些美元，你指的是究竟對話服務，因爲$對話框不是核心AngularJS API的一部分。 假設您使用的是ui-bootstrap中的$ dialog服務，您可以通過$ dialog對象配置對象的resolve屬性將用戶對象傳遞給對話框控制器。

由於$dialog documentation指出它：

決心：成員將得到解決，並傳遞給控制器​​ 當地人

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){ 
    ... 
}