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>'); 
    });