【问题标题】:Underscore values from template not displaying in the $modal of angular ui bootstrap?模板中的下划线值未显示在角度 ui 引导程序的 $modal 中?
【发布时间】: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()">&times;</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


【解决方案1】:

虽然我的信息有些不完整(请参阅我对问题的评论),但我猜问题实际上很简单:

ng-include src="'enroll.html'"

应该替换为

ng-include="'enroll.html'"

但是 - 这可能不是唯一的错误。

【讨论】:

  • 好的:如果您愿意花 5 分钟时间将所有这些内容放入 jsfiddle 或 plunkr 中,我将很乐意进行更深入的研究。 jsfiddle.net/joshdmiller/HB7LU 是一个很好的模板。
猜你喜欢
  • 1970-01-01
  • 2016-11-13
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多