AngularJS - 通过对象数据成模 [英] AngularJS - Pass object data into modal

问题描述

我在我使用一个中继器打造出了一个特定的用户信息的信息屏幕。

在单击编辑按钮，我怎么能在特定的用户对象数据传递到模态窗口模板？

HTML

 ＆LT;形式的集体=定制NG-控制=DepCtrlNG-披风类=NG-斗篷GT＆;
＆LT;字段集NG重复=对象data.dataset＆GT;
＆LT;传奇＆GT;＆LT;跨度＆GT; {{object.header}}＆LT; / SPAN＆GT;＆LT;跨度类=dep_rel＆GT;（{{object.relation}}）LT; / SPAN＆GT;＆LT; /传说＆GT;
    ＆LT; D​​IV CLASS =行＆GT;
        ＆LT; D​​IV CLASS =四柱NG重复=o在object.collection.inputs＆GT;
            ＆所述;跨度类=table_label＆GT; {{o.label}}：或其可/跨度＆GT;＆下;跨度类=table_answer＆GT; {{o.value}}＆下/跨度＆GT;＆所述峰; br：GT;
        ＆LT; / DIV＆GT;
    ＆LT; / DIV＆GT;
    ＆LT; D​​IV CLASS =行＆GT;
        ＆LT;一个NG点击=openDialog（编辑）的风格=COLOR：＃444;文字修饰：无;保证金右：10px的;的margin-top：为5px;类=btn_gray小左的href =＃＆gt;编辑＆LT; / A＆GT;
        ＆LT;风格=COLOR：＃444;文字修饰：无;的margin-top：为5px;类=btn_gray更小的href =＃＆GT;删除＆LT; / A＆GT;
    ＆LT; / DIV＆GT;
＆LT; /字段集＆GT;
＆LT; /表及GT;
 

JS

 函数DepCtrl（$范围，家属，$对话）{
$ scope.data =家属;变种T ='＆LT; D​​IV CLASS =模头＆GT;'+
      '＆LT; H3＆GT;' + $ scope.header.value +'＆LT; / H3和GT;'+
      '＆LT; / DIV＆GT;'+
      '＆LT; D​​IV CLASS =模体＆GT;'+
      '＆LT; P＆GT;输入一个值传递到＆lt; code＆GT;关闭＆LT; / code＆GT;作为结果：或其可输入纳克模型=结果/＆GT;＆下; / P＆GT;'+
      '＆LT; / DIV＆GT;'+
      '＆LT; D​​IV CLASS =模式躯＆GT;'+
      '＆LT;按钮NG点击=关闭（结果）级=BTN BTN-小学＆GT;关闭＆LT; /按钮＆GT;'+
      '＆LT; / DIV＆GT;';$ scope.opts = {
背景：真实，
键盘：真实，
dialogFade：真实，
backdropClick：假的，
模板：T，// OR：templateUrl：'路径/要/ view.html'，
控制器：'TestDialogController
};$ scope.openDialog =功能（动作）{
变种D = $ dialog.dialog（$ scope.opts）;
//如果（动作===编辑）{$ scope.opts.templateUrl ='../../modal.html'; }
d.open（）。然后（功能（结果）{
  如果（结果）
  {
    警报（'对话封闭，结果是：'+结果）;
  }
}）;
};
}
 

解决方案

它有助于了解哪些美元，你指的是究竟对话框的服务，因为$对话框不是核心AngularJS API的一部分。
假设你正在使用从 UI的引导中的$对话框中的服务，你可以通过你的用户对象为通过决心对话框控制器 $对话框配置对象的属性。

由于 $对话框文档指出的：

  

解析：成员将得到解决，并传递给控制器
  当地人

函数DepCtrl（$范围，家属，$对话）{
  $ scope.data =家属;  $ scope.opts = {
    背景：真实，
    键盘：真实，
    dialogFade：真实，
    backdropClick：假的，
    模板：T，// OR：templateUrl：'路径/要/ view.html'，
    控制器：'TestDialogController'，
    解析：{
      用户：函数（）{
        返回$ scope.data;
      }
    }
  };  $ scope.openDialog =功能（动作）{
    变种D = $ dialog.dialog（$ scope.opts）;
    d.open（）;
  };}/ **
 * [TextDialogController介绍]
 * @参数{对象} $对话实例
 * @参数{}混合user用户从决心Object对象
 * /
功能TextDialogController（对话框，用户）{
  ...
}


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

解决方案

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.

As the $dialog documentation states it:

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

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

这篇关于AngularJS - 通过对象数据成模的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！