【发布时间】:2014-03-31 06:20:09
【问题描述】:
我是 angular 新手,我正在尝试使用 angular ui bootstrap $modal 来显示具有下划线值但模态不呈现这些值的模板?代码有问题吗?请让我知道我真的需要快速修复这个问题。模式中不显示 premiumprice(premiumdollar 和 premiumcents)值。
HTML 代码
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true" ng-click="cancel()">×</button>
<h4 class="modal-title" id="myModalLabel">Confirm </h4>
</div>
<div class="modal-body">
<div class="modalBodyHead">
<h4>You are enrolling in</h4>
<h3>This Plan</h3>
</div>
<div class="planContent row">
<div class="col-md-12 col-xs-12 plans row">
<div class="planCard col-md-4 col-xs-4">
<div class="pBody">
<div ng-include src="'enroll.html'"></div>
</div>
</div>
<div class="planCard col-md-4 col-xs-4">
<div class="pBody">
<div ng-include src="'newenroll.html'"></div>
</div>
</div>
<div class="planCard col-md-4 col-xs-4">
<div class="pBody">
<div>This is out-of-Pocket section</div>
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<div class="col-md-4 col-xs-4 lAlign">
<button type="button" class="btn btn-link btnCancel" data-dismiss="modal" ng-click="cancel()">Cancel</button>
</div>
<div class="col-md-8 col-xs-8">
<button type="button" class="btn btn-link btnNormal" data-dismiss="modal" ng-click="cancel()">Save and Return to Benefits</button>
<button type="button" class="btn btn-success" data-dismiss="modal" ng-click="cancel()">Save and continue to dental</button>
</div>
</div>
</div>
enroll.html 模板代码
<premium-view>
<div class="planFeatCost">
<div class="premium row smallTxt clearfix">
<div class="col-md-7 col-xs-7 ">
</div>
<div class="col-md-5 col-xs-5">
<div class="btn-group">
<button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
<span class="caret"></span>
</button>
<ul class="dropdown-menu" role="menu">
<li><a href="#">Month</a></li>
</ul>
</div>
</div>
</div>
<h3> ${{premiumDollars}} <sup>.{{ premiumCents }} </sup></h3>
</div>
</premium-view>
具有 $modal 代码的控制器 js 文件
angular.module('enrollment', ['ui.router.state'])
.controller('ModalInstanceCtrl',['$scope','$modalInstance',function($scope,$modalInstance){
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}])
.controller('confirmModalDialogController',['$scope','$modal','$location', 'WorkflowService', 'OptionPlusDependentService',function($scope,$modal,$location, WorkflowService, OptionPlusDependentService){
$scope.title ='Enrollment';
$scope.name = "HSA";
$scope.open = function () {
var modalInstance = $modal.open({
templateUrl: 'myModalContentEnroll.html',
windowClass: 'modelT1',
backdrop: 'static',
keyboard: false,
controller: 'ModalInstanceConfirmCtrl'
});
};
}])
.controller('ModalInstanceConfirmCtrl',['$scope','$modalInstance',function($scope,$modalInstance){
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
}]);
计算溢价的控制器和指令在另一个js文件中
【问题讨论】:
-
你能把这一切都放在一个 jsfiddle 或 plunkr 中吗?不然看的有点太繁琐了。此外,溢价价格指令会非常有帮助,因为我知道溢价美元等的价值来自那里?
标签: controller scope modal-dialog underscore.js angular-ui-bootstrap