angular-ui：日期选择器在显示按钮时似乎挂起 angularjs

Posted 2023-05-09

【中文标题】angular-ui：日期选择器在显示按钮时似乎挂起 angularjs

【英文标题】：angular-ui: datepicker seems to hang angularjs when showing button

【发布时间】：2012-07-21 15:17:28

【问题描述】：

我的应用程序中有这段 html 代码（之前定义了 ng-app 和 ng-controller 值）：

<div>
    <label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
    <input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>
    <img ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>

我的 AngularJS 控制器如下所示：

function ProjectSearchCtrl($scope) 
    $scope.startDate = '';

    $scope.hasStartDate = function () 
        return $scope.startDate != '';
    ;

    $scope.clearStartDate = function () 
        $scope.startDate = '';
    ;

    $scope.dateOptions = 
        dateFormat: "yy-mm-dd",
        showOn: "focus"
    ;

这很好用：感谢 AngularUI，我正确设置了日期选择器，AngularJS 绑定工作......

但是，如果我将 showOn 值更改为“button”或“both”（这两个可能的选项将实际显示 datepicker 按钮），则输入后的所有内容（包含 ui-date 属性）都将停止工作：ng-show , ng-click... 控制器甚至没有被调用。

版本（都是最新的）：

jQuery 1.7.2 angularJS 1.0.0 angularUI 0.1.0 铬 20

【问题讨论】：

我怀疑这是因为 jquery 日期选择器小部件与 HTML 混淆并混淆了 AngularJS。我会考虑一下我们能做些什么。可能是我们必须将日期选择器包装在 div 或其他东西中以隔离 jquery 小部件所做的更改，以免影响 HTML 的其余部分。

嗯，确实，这种解决方法可以解决问题

【参考方案1】：

请查看this line in the Select2 directive。这是给任何人在AngularJS（不仅仅是AngularUI）中编写指令/实现插件的注释：

任何在链接元素后立即注入新 DOM 元素的插件都有破坏编译器的风险。原因是因为 AngularJS 的工作方式，它在编译时缓存每个 DOM 元素的索引时间，然后在链接时进行第二次传递。当你注入新的 DOM 时，你会在指令之后立即偏移所有兄弟的索引。

出于这个原因，我不得不将 TinyMCE 和 Select2 都包装在一个 setTimeout 中，以便在链接完成后注入 DOM。请注意，我不费心使用 $timeout 因为我真的不需要/想要 $apply() 只是为了打开插件而触发，因为当插件更改数据时已经有回调可以执行此操作。

我会考虑确保这在 AngularUI 中是统一的。不幸的是，目前 AngularJS 中似乎没有优雅的解决方案来解决这个问题，但这是我一直在思考的问题，并且一直在寻找更好的解决方案。

阅读此 Google 网上论坛帖子以了解有关编译与链接的更多信息：https://groups.google.com/forum/?fromgroups#!searchin/angular/compile$20link/angular/RuWn5W3Q5I0/KJhcQJ_RNsIJ

你以后也可以open a bug ticket on the AngularUI project。

【讨论】：

感谢您为我开票。对于其他找到问题的人，请参阅github.com/angular-ui/angular-ui/issues/109

【参考方案2】：

正如 Pete BD 在他对该问题的评论中所建议的那样，jQueryUI 和 angularJS 交互的方式存在某种错误/不需要的行为。一种解决方法是将输入控件包装在一个 div 中。

<div class="date">
    <label for="projectSearchDateFrom"><%= Res("Projects.Search.From")%></label>
    <div>
        <input id="projectSearchDateFrom" type="text" ng-model="startDate" ui-date="dateOptions"/>                                  
    </div>
    <img class="clear" ng-show="hasStartDate()" ng-click="clearStartDate()" src="/_Layouts/ClientPortal/Images/layout/TA/delete-small.png" ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>

现在我可以使用 showOn "both" 或 "button"。

【讨论】：

另外，你应该考虑使用 ui-reset 而不是那个 img.. ;-D angular-ui.github.com/#directives-reset

甜蜜！谢谢。我刚刚开始使用 ng，正在尝试将大型 js 应用程序迁移到它，所以欢迎任何建议！

【参考方案3】：

此问题已在最新版本中修复！