angularstrap日期选择器头显示

Question

我加入了以下模块

angular.module('myapp', ['ngCookies','ngAnimate','ngSanitize','mgcrea.ngStrap']); 

链接：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular.min.js"></script> 
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular-resource.min.js'></script> 
<script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-rc.1/angular-cookies.min.js'></script>  
<script src="/js/lib/jquery/jquery-2.1.1.min.js"></script> 
<script src="/js/lib/parsley/parsley.min.js"></script> 
<script src="/js/lib/bootstrap/bootstrap-3.2.0.min.js"></script> 
<script src="/js/lib/angular-strap/dist/angular-strap.min.js"></script> 
<script src="/js/lib/angular-strap/dist/angular-strap.tpl.min.js"></script> 
<script src="//code.angularjs.org/1.2.23/angular-sanitize.min.js" data-semver="1.2.23"></script> 
<script src="//code.angularjs.org/1.2.23/angular-animate.min.js" data-semver="1.2.23"></script> 
<link rel="stylesheet" href="//mgcrea.github.io/angular-strap/styles/main.min.css"> 
<link rel="stylesheet" href="//rawgithub.com/mgcrea/bootstrap-additions/master/dist/bootstrap-additions.min.css"> 
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css"> 

仍然看起来像下面。我想知道他们之间是否存在任何混淆？

哦，我也是从问题添加了这个398：

a { 
    -webkit-transition: all 0.4s; 
    -moz-transition: all 0.4s; 
    -o-transition: all 0.4s; 
    transition: all 0.4s; 
} 
a:hover { 
    opacity: 0.7; 
    filter: alpha(opacity=70); 
} 
.food, .beer, .sleep, .javascript { 
    font-weight: bold; 
} 

刚刚找到自己的解决方案：

为了帮助别人得到了同样的问题：

当你使用车把模板引擎时，你可能会遇到这个问题。因为hbs和angularjs都使用{{}}，所以它们发生冲突。我将angularjs之一更改为{[{}]}，所以我有这个datepicker问题。

myapp.config(function($interpolateProvider) { 
    $interpolateProvider.startSymbol('{[{'); 
    $interpolateProvider.endSymbol('}]}'); 
}); 

然后解决方案：

1. 不要使用HBS发动机。

2. 更改line28的angular-strap.tp.js angularjs引用{[{}]} in;

   <i class="{{$iconLeft}}"></i> to <i class="{[{$iconLeft}]}"></i> 
   <i class="{{$iconRight}}"></i> to <i class="{[{$iconRight}]}"></i> 
   colspan="{{ rows[0].length - 2 }}" to colspan="{[{ rows[0].length - 2 }]}" 
   

Answer 1

我用树枝有同样的问题。 我解决了重写在angularstrap中定义的$ templateCache变量。我不确定这是最好的解决方案，但它的工作原理，让我继续使用树枝和angularstrap。

angular 
    // Load frontend module 
    .module('frontend', ['ngAnimate', 'ngSanitize', 'mgcrea.ngStrap', 'smoothScroll']) 
    // Change the delimiters for avoiding collisions with twig 
    .config(function($interpolateProvider) { 
     $interpolateProvider.startSymbol('{[{').endSymbol('}]}'); 
    }) 
    // Override the angularstrap datapicked handlebars for a collision with twig delimiters 
    .run(function($templateCache) { 
     $templateCache.put('datepicker/datepicker.tpl.html', '<div class="dropdown-menu datepicker" ng-class="\'datepicker-mode-\' + $mode" style="max-width: 320px"><table style="table-layout: fixed; height: 100%; width: 100%"><thead><tr class="text-center"><th><button tabindex="-1" type="button" class="btn btn-default pull-left" ng-click="$selectPane(-1)"><i class="{[{$iconLeft}]}"></i></button></th><th colspan="{[{ rows[0].length - 2 }]}"><button tabindex="-1" type="button" class="btn btn-default btn-block text-strong" ng-click="$toggleMode()"><strong style="text-transform: capitalize" ng-bind="title"></strong></button></th><th><button tabindex="-1" type="button" class="btn btn-default pull-right" ng-click="$selectPane(+1)"><i class="{[{$iconRight}]}"></i></button></th></tr><tr ng-show="showLabels" ng-bind-html="labels"></tr></thead><tbody><tr ng-repeat="(i, row) in rows" height="{[{ 100/rows.length }]}%"><td class="text-center" ng-repeat="(j, el) in row"><button tabindex="-1" type="button" class="btn btn-default" style="width: 100%" ng-class="{\'btn-primary\': el.selected, \'btn-info btn-today\': el.isToday && !el.selected}" ng-click="$select(el.date)" ng-disabled="el.disabled"><span ng-class="{\'text-muted\': el.muted}" ng-bind="el.label"></span></button></td></tr></tbody></table></div>'); 
    });