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のおかげでdatepickerが正しく設定されており、AngularJSバインディングが機能しています...

しかし、showOn 値を「button」または「both」(実際に日付ピッカー ボタンを表示する 2 つの可能なオプション) に変更すると、入力の後のすべて (ui-date 属性を含む) が機能しなくなります: ng-show、ng-クリック...コントローラーは呼び出されません。

バージョン (すべて最新):

  • jQuery 1.7.2
  • angularJS 1.0.0
  • angularUI 0.1.0
  • クローム 20
4

3 に答える 3

6

Select2 ディレクティブのこの行を見てください。これは、AngularJS (AngularUI だけでなく) でディレクティブを作成する/プラグインを実装するすべての人へのメモです。

リンクされた要素の直後に新しい DOM 要素を挿入するプラグインは、コンパイラを混乱させるリスクがあります。その理由は、AngularJS の動作方法により、コンパイル時に各 DOM 要素のインデックスをキャッシュし、リンク時に 2 番目のパスを作成するためです。新しい DOM を挿入すると、ディレクティブの直後にすべての兄弟のインデックスがオフセットされます。

このため、リンクが完了した後に DOM が挿入されるように、TinyMCE と Select2 の両方を setTimeout でラップすることを余儀なくされました。プラグインがデータを変更するときにこれを行うコールバックが既に配置されているため、プラグインをオンにするためだけに $apply() を起動する必要がない/したくないので、わざわざ $timeout を使用しないことに注意してください。

これがAngularUI全体で均一であることを確認します。残念ながら、現時点で AngularJS にはこの問題に対するエレガントな解決策はないようですが、これは私がしばらく考えてきた問題であり、より良い解決策を常に探しています。

コンパイルとリンクの詳細については、この Google グループの投稿をお読みください。

今後、AngularUI プロジェクトでバグ チケットを開くこともできます。

于 2012-07-23T18:06:49.243 に答える
0

これは最新のリリースで修正されています。

于 2013-02-15T12:45:04.523 に答える
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 の「両方」または「ボタン」を使用できるようになりました。

于 2012-07-23T14:30:19.773 に答える