gpt4 book ai didi

javascript - AngularJS - 使用 Resolve 将数据传递到模式

转载 作者:行者123 更新时间:2023-12-03 05:09:33 26 4
gpt4 key购买 nike

标题说明了一切。我创建了一个模式,我希望数据从另一个页面传递到模式。

这是打开模式的按钮。 (rollup.html)

 <button id="myBtn" ng-click="printDivModal('rollup-tab', test)">Modal Test</button>

这里我设置了 Controller 和解析(rollup.js)

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
$scope.printDivModal = function(divName,test) {
console.log('opening pop up');
var ModalInstance = $uibModal.open({
scope: $scope,
animation: $scope.animationsEnabled,
templateUrl: 'app/views/modals/stackedModal.html',
size: 'xl',
controller: 'PrintViewCtrl',
backdrop : 'true',

resolve: {
test: function () {

return test;
}
}


});

}

});


app.controller('PrintViewCtrl', function($scope, $http, $rootScope, $uibModalInstance) {
$scope.test = function() {
$scope.regionName;
$scope.groupName;
$scope.mcName;
$scope.districtNumber;
$scope.routeNumber;
$scope.weekEndDate;

};

});

我不确定是否需要将其放入模式主体(stackedModal.html)中,或者单击按钮是否会通过“测试”。

<div class="modal-body">
<p>{{test.regionName}}</p>
</div>

我想要传递给模态的数据都在Route.html中。这是页面的一部分。

<div class="row">
<div class="col-xs-6 col-md-4">
<label>Region:</label>
<span>{{regionName}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>Group:</label>
<span>{{groupName}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>MC:</label>
<span>{{mcName}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>District #:</label>
<span>{{districtNumber}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>Route #:</label>
<span>{{routeNumber}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>Week Ending Date:</label>
<span>{{weekEndDate}}</span>
</div>
<div class="col-xs-6 col-md-4">
<label>RSR:</label>
<span style="text-transform: capitalize;">{{rsrName}}</span>
</div>
</div>

有什么建议可以帮助我完成这个任务吗?我是新的 Angular js。谢谢!

更新用颜色和组织方式打印数据 V

当您单击“打印机友好”按钮时,这将打开新选项卡。 (rollup.js)

app.controller('Rollup', function($scope, $rootScope, $http, $uibModal, headersvc, locFiltersvc) {
$scope.printDiv = function(divName) {
var topWrapper = "<div class='panel panel-default'><div class='panel-body'>";
var bottomWrapper="</div></div>";
var printContents = document.getElementById(divName).innerHTML;
var links = $(document).find('link');
var scripts = $(document).find('script')
var styles = "";
for (var i = 0; i < links.length; i++) {
styles += links[i].outerHTML;
}

var popupWin = window.open('', '_blank');
popupWin.document.open();

popupWin.document.write('<html><head>' + styles + '</head><body>' + printContents + '</body></html>');

}

}

我希望打印预览包含主表中看到的颜色

最佳答案

PrintViewCtrl 的依赖项中应该有一个变量“test”。

app.controller('PrintViewCtrl', function($scope, $http, $rootScope, $uibModalInstance, test)

此外,您必须在“Rollup” Controller 的 $scope 中有一个测试变量。当您为点击设置“printDivModal('rollup-tab', test)”时,会在范围内搜索 printDivModal 和 test。

编辑

test 可以是像

这样的对象
$scope.test = {regionName:..., mcName:..., etc...}

然后在你的html中使用

{{test.regionName}} instead of {{regionName}}

例如。

关于javascript - AngularJS - 使用 Resolve 将数据传递到模式,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41878597/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com