javascript - AngularJS : date-time picker (vs) zoom in graph : one or the other not working

Question

在我的 AngularJS 应用程序中，我尝试根据用户选择的时间段(使用日期时间选择器)绘制图表。截图如下:

使用 1.7.1 时

正在使用bootstrap JS for date-time picker 。问题是，当我使用 JQuery 版本 1.7.1 时，图形缩放可以工作，但日期时间选择器不起作用。 这是浏览器控制台中的错误:

Error: Failed to execute 'appendChild' on 'Node': The new child element is null.
    at Error (native)
    at Function.f.extend.clean (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:4:4522)
    at Function.f.buildFragment (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:4:2303)
    at f.fn.extend.domManip (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:4:1672)
    at f.fn.extend.append (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:3:31818)
    at DateTimePicker.fillDate (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:9195)
    at DateTimePicker.update (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:6538)
    at DateTimePicker.init (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:2408)
    at new DateTimePicker (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:125)
    at HTMLDivElement.<anonymous> (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:23028) <div class="input-append ng-pristine ng-valid" startdatetime="" ng-model="var1" ng-style="{'display': 'inline-block'}"> angular1.2.1.js:84
Error: Failed to execute 'appendChild' on 'Node': The new child element is null.
    at Error (native)
    at Function.f.extend.clean (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:4:4522)
    at Function.f.buildFragment (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:4:2303)
    at f.fn.extend.domManip (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:4:1672)
    at f.fn.extend.append (https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js:3:31818)
    at DateTimePicker.fillDate (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:9195)
    at DateTimePicker.update (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:6538)
    at DateTimePicker.init (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:2408)
    at new DateTimePicker (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:125)
    at HTMLDivElement.<anonymous> (http://192.168.0.103:8080/restapi/date-picker/dateTimeBootstrap.js:26:23028) <div class="input-append ng-pristine ng-valid" enddatetime="" ng-model="var1" ng-style="{'display': 'inline-block'}">

使用 1.9.1 时

并且，使用 1.9.1 时，图形缩放不起作用，但日期时间选择器起作用。浏览器抛出此错误:

Uncaught TypeError: Cannot read property 'addClass' of undefined jquery-ui.min.js:380
    a.widget._mouseCapturejquery-ui.min.js:380
    a.widget._mouseDownjquery-ui.min.js:26
    (anonymous function)jquery-ui.min.js:25
    b.event.dispatchjquery.js:9593
    v.handle

PLUNKR代码

这是plunkr code 。 JQuery脚本版本代码指的是:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

Answer 1

将 AngularJS 与 jQuery 1.9.1 和 jQuery UI 1.8.15 或更低版本一起使用时存在不兼容问题。 只需升级到较新版本的 jQuery UI(在本例中为 1.9.2+)即可解决问题。