0

我的应用程序中有这段 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" alt="<%= Res("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-单击...控制器甚至没有被调用。

版本（所有都是最新的）：

  • jQuery 1.7.2
  • 角JS 1.0.0
  • 角UI 0.1.0
  • 铬 20
4

3 回答 3

6

请看一下Select2 指令中的这一行。这是给任何在 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

以后你也可以在 AngularUI 项目上开一个 bug 票。

于 2012-07-23T18:06:49.243 回答
0

正如 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" alt="<%= Res("ToolbarDialog.Clear")%> <%= Res("Projects.Search.From")%>" title="<%= Res("ToolbarDialog.Clear")%>" />
</div>

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

于 2012-07-23T14:30:19.773 回答
0

这已在最新版本中修复！

于 2013-02-15T12:45:04.523 回答