Question

我有以下代码，但它没有按预期工作。当我点击计时器图标时，没有任何反应。

<ul class="dropdown-menu customScroll" role="menu" aria-labelledby="btn-append-to-body" ng-show="!myVm.showETA">
    <li role="menuitem">
        <a href="#">Start Time
            <div class="input-group bootstrap-timepicker">
                <input type="text" id="timepicker1" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
                ng-model=myVm.startTime"
                ng-change="myVm.getETACount('startTime');myVm.applyFilterForResultCount()"
                />
                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div>
        </a>
    </li>
    <li role="menuitem">
        <a href="#">End Time
            <div class="input-group bootstrap-timepicker timepicker">
                <input type="text" id="timepicker2" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
                ng-model="myVm.endTime"
                ng-change="myVm.getETACount('endTime');myVm.applyFilterForResultCount()"
                />
                <span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
            </div>
        </a>
    </li>
    <!--Clear div-->
    <li role="menuitem" ng-click="myVm.clearTimePicker()">
        <a href="#">
            <p>
                <span style="color:#40A8E2;">Clear</span>
                <span style="color:#333333;">  – ETA</span>
            </p>
        </a>
    </li>
    <script type="text/javascript">
        $('#timepicker1').timepicker();
        $('#timepicker2').timepicker();
    </script>
</ul>

Answer 1

除非您知道如何编写指令，否则不要尝试使用带有角度的常规bootstrap.js文件。当使用angular时，如果你需要做一些DOM操作或扩展元素的标记或行为（事件处理程序），你应该使用指令。对于timepicker，您只需使用ui-bootstrap角度模块https://angular-ui.github.io/bootstrap/#/timepicker，您需要包含常规bootstrap.css和ui-bootrap-tpls.js然后包含ui-bootstrap模块依赖项，您可以使用该指令

时间选择器不在引导程序上工作

1 个答案: