0

ng-repeat は長さが不明であるため、ディレクティブをレンダリングする ng-repeat があります。ディレクティブを介して、クリック時に jquery プラグインを動的にロードしようとしています。

私はかなり近いと思いますが、プラグインの一部しか読み込まれず、残念ながらエラーは発生しません。Pickadateプラグインに精通している場合、クラスは入力要素でレンダリングされますが、動的に追加される要素はクリック時にレンダリングされません。

これが私のコードです：

HTML

<div class="calendar" add-calendar>Click to add calendar</div>

Angular ディレクティブ 1

agentApp.directive('addCalendar', ['$compile', function($compile) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            template = '<input type="text" jq-date-picker-range />';

            element.bind('click', function() {
                angular.element(this).after($compile(template)(scope));
            });
        }
    }
}]);

Angular ディレクティブ 2

agentApp.directive('jqDatePickerRange', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
          angular.element(element).pickadate();
        }
    };
});

出力

<input type="text" jq-date-picker-range class="ng-scope picker__input picker__input--active" readonly="" id="P780839543" aria-haspopup="true" aria-expanded="true" aria-readonly="false" aria-owns="P780839543_root">

ご覧のとおり、クラスは作成されていますが、その後レンダリングされるカレンダー div 要素は作成されていません。

どんな助けでも大歓迎です。ありがとう。

4

1 に答える 1

1

問題はレンダリングの問題だったようです。事実上、レンダリングを担当するスレッドは最初の呼び出しを行うときにビジーであると想定しているため、既存の DOM 要素にクラスを追加するプラグインの機能は利用できますが、DOM に新しい要素を追加することはできません。この解決策よりも良い方法があると思います-そして、それを聞きたいです. しかし今のところ、呼び出しを $timeout 関数でラップすることでうまくいきます。

agentApp.directive('jqDatePickerRange', ['$timeout', function($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

          $timeout(function() {
            angular.element(element).pickadate();
          }, 0);

        }
    };
}]);
于 2015-04-11T15:36:32.297 に答える