angularjs上实现模态的困境。我对这个框架仍然很陌生,我正在使用我从 ng-modules.org 获得的模块之一,https://github.com/sarath2/ngEkathuwa ngEkathuwa,它实现了引导 3 模式。但是,我很难理解如何使用模块将 ng-repeat 列表的值传输到模态。
<table ng-table="tableParams" class="table">
<tr ng-repeat="uti in $data">
<td data-title="'UTI Meter'" sortable="meter">
{{uti.item}}
</td>
<td data-title="'Date'" sortable="cdate" align="middle">
{{uti.cdate}}
</td>
<td align="middle" data-title="'Action'">
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myDelete" ng-click="deleteUti(uti.ikey)">
<span class="glyphicon glyphicon-remove-sign"></span> Delete
</button>
<button type="button" class="btn btn-default" data-toggle="modal" data-target="#myEdit">
<span class="glyphicon glyphicon-edit"></span> Edit
</button>
</td>
</tr>
</table>
http://plnkr.co/ebDtSMw6w0IZquaglEMe,来自github的示例仅显示了从按钮触发的静态数据。我已经梳理了网站,有人说您必须使用解析来传输数据,然后显示在您的模态上。再一次,我无法在文档中找到它。我只是想知道该模块是否仅支持静态数据,或者应该在模态控制器下完成解析。
无论如何,以下是脚本,任何帮助克服这个绊脚石肯定会不胜感激。
这是控制器:实现了解析{}。
myApp.controller('utiCtrl',
function gaugeCtrl($scope, $filter, ngTableParams, $log, $http, $ekathuwa){
$scope.addUTI = function(){
$ekathuwa.modal({
id: "modalUTI",
scope: $scope,
templateURL: "./tpl/modal-uti.html"
});
}
$scope.deleteUti = function(ikey){
var p = $ekathuwa.modal({
id: "modalUtiDelete",
scope: $scope,
contentPreSize: "sm",
controller: modalDeleteCtrl,
templateURL: "./tpl/modal-delete.html",
show: true,
resolve: {
meter: function(){
return 'Test';
}
}
});
$q.when(p).then(function (m) {
m.modal('show');
});
}
var modalDeleteCtrl = function ($scope, $p, meter) {
$scope.meter = meter;
};
});
我能够找出问题的答案。谢谢布兰登·蒂利的例子,它让我对这个问题有了进一步的理解。
我需要按范围在模态内声明传递的值 ikey。与使用 ui.bootstrap 的模态不同,此模块也使用双向绑定,并且不使用 resolve{} 将数据显示到模态接口。
$scope.deleteUti = function(ikey){
$scope.meter = ikey;
$ekathuwa.modal({
id: "modalUtiDelete",
scope: $scope,
contentPreSize: "sm",
controller: modalDeleteCtrl,
templateURL: "./tpl/modal-delete.html"
});
var modalDeleteCtrl = function ($scope) {
};
}