angularstrap datepicker标题只显示月份

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改为{[{}}}，如下所示，所以我遇到了这个日期选择问题。

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

然后是解决方案：

1. 不要使用hbs作为引擎。

2. 将angular-strap.tp.js angularjs的第28行更改为{[{}}} 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>');
    });