AngularJS - 将对象数据传递给模态

I have an information screen in which I'm using a repeater to build out information on a specific user.

我有一个信息屏幕,我正在使用转发器来构建特定用户的信息。

When the "Edit" button is clicked, how can I pass the specific user object data into the modal window template?

单击“编辑”按钮时,如何将特定用户对象数据传递到模态窗口模板?

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

1 个解决方案

#1

It helps to know which $dialog service you are referring to exactly, since $dialog is not the part of core AngularJS API. Assuming that you are using the $dialog service from the ui-bootstrap, you can pass your user object into the dialog controller through the resolve property of $dialog configuration object.

由于$ dialog不是核心AngularJS API的一部分,因此有助于了解您所指的是哪个$ dialog服务。假设您正在使用ui-bootstrap中的$ dialog服务,您可以通过$ dialog配置对象的resolve属性将用户对象传递到对话框控制器。

As the $dialog documentation states it:

正如$ dialog文档所述:

resolve: members that will be resolved and passed to the controller as locals

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