AngularJS UI Bootstrap DatePicker無法正常運行

Question

我有一個定義如下的指令：

模板

<div class="date-picker">
    <div class="row">
        <div class="col-md-6">
            <label for="{{datePickerId}}">{{labelText}}</label>
            <p class="input-group">
                <input type="text"
                       id="{{datePickerId}}"
                       class="form-control"
                       datepicker-popup="{{format}}"
                       ng-model="dt"
                       is-open="opened"
                       datepicker-options="dateOptions"
                       disabled="disabled"
                       ng-required="true"
                       close-text="Close" />
                <span class="input-group-btn">
                    <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
                </span>
            </p>
        </div>
    </div>
</div>

指示

//TypeScript

module MyApp.Directives {
    /** Scope for Messaging directive. */
    export interface IMaDatePickerScope extends ng.IScope {
        dt: Date;
        today(): void;
        clear(): void;
        disabled(date, mode): boolean;
        open($event): void;
        opened: boolean;
        dateOptions;
        formats: string[];
        format: string;
    }


    export class MaDatePicker implements ng.IDirective {
        restrict = "E";
        templateUrl = TEMPLATES + 'ma-date-picker.html';
        replace = true;
        transclude = true;
        scope = {
            labelText: '@',
            datePickerId: '='
        }
        link = (scope: IMaDatePickerScope) => {
            scope.today = () => {
                scope.dt = new Date();
            }
            scope.today();

            scope.clear = () => {
                scope.dt = null;
            }
            scope.disabled = (date: Date, mode) => {
                return (mode == 'day' && (date.getDay() === 0 || date.getDay() === 6)); //disable Saturday and Sunday
            }
            scope.open = ($event) => {
                $event.preventDefault();
                $event.stopPropagation();
                scope.opened = true;
            }

            scope.dateOptions = {
                formatYear: 'yy',
                startingDay: 1
            }

            scope.formats = ['yyyy-MM-dd', 'dd-MMMM-yy', 'yyyy/MM/dd', 'dd.MM.yyyy', 'shortDate'];
            scope.format = scope.formats[0];            
        }
        controller = ($scope: IMaDatePickerScope) => {

        }
    }
}

它取自此處的DatePicker部分 ，其功能應類似於該頁面上顯示的彈出版本。 每當我單擊日歷按鈕啟動指令時，日歷就會以損壞的方式顯示。 此外，當我單擊彈出式日歷中的“下個月”箭頭時，日歷會繼續向左擴展。 我的代碼有問題嗎？ 我沒有為此添加任何樣式，因為根據站點似乎沒有任何樣式，但是我想在拆解現有樣式之前檢查代碼中是否有明顯錯誤的地方。

Answer 1

沒有看到您可能包含的CSS文件，我無法確切說明罪魁禍首，盡管如果您將Twitter Bootstrap與除Angular UI Bootstrap之外的其他CSS庫一起使用，則您很可能會遇到一個或多個樣式沖突。這些其他CSS文件更多。 我發現隔離這些問題的最簡單方法是使用Chrome瀏覽器開發人員工具檢查CSS覆蓋及其來源，並准確查看沖突的位置，然后更新我的自定義CSS來解決這些問題。 我不建議修改Twitter Bootstrap之類的OTB CSS庫以實現可維護性。 始終使用自己的自定義CSS文件。 我在日期選擇器上確實遇到了類似的問題，花了一些時間才找出它們在哪里。 如果確實是您的情況，那么使用多個CSS庫是有危險的。 狩獵愉快！