0

編集ディレクティブのテンプレートで使用してバグを修正しましたが、それが何が違うのか、なぜそれが重要なのかng-clickを知りたいと思っていますng-clickelement.bind

モデルを更新するための ng-select ボックスがありました

<td><select ng-model="tune.dummyStandard" ng-options="opt.value as opt.label for opt in dropdowns.playback" ng-change="update()" > <option value="">-- rate performance --</option> </select></td>

長い検証プロセスの最後に、$http(経由で) 新しい要求を作成し$resource.$update、レコードを保存しました。

カスタムディレクティブを使用するように変更しました

<td j-performance-rater data-tune="tune"></td>

次のリスナーをアタッチします（実際のリスナーはもう少し複雑ですが、常にtune.resource.$update期待どおりに起動することを非常に厳密に確認しました）

element.bind('click', function (ev) {

   // code for validation and setting of model props

   tune.resource.$update();

});

奇数回のクリックで$httpオブジェクトが作成されますが送信されず、偶数回のクリックで以前に作成されたオブジェクトが送信され$http、新しいオブジェクトが作成されて正常に送信されます。これは、クリックがディレクティブの異なるインスタンスで行われた場合でも一貫して発生します。$digestスコープをいじってみまし$applyたが、影響はありません（$httpダイジェストサイクルとは無関係に動作する必要があるように思われるかどうかはわかりません）。

誰が問題が何であるかを考えることができますか?

完全なディレクティブ コード

directives.directive('jPerformanceRater', function () {
    return {
    // transclude: true,
        scope: true,
        templateUrl: '/views/directives/performance-rater.html',
        compile: function(element, attrs) {
            return function (scope, element, attrs) {
                var tune = scope[attrs.tune || 'tune'];

                scope.tune = tune.tune;
                element.bind('click', function (ev) {
                    ev.cancelBubble = true;
                    var btn = ev.target.className.indexOf('icon') > -1 ? ev.target.parentNode : ev.target;

                    if (btn.className.indexOf('btn')  === -1) {
                        return;
                    }
                    tune.dummyStandard = +btn.textContent;
                    tune.update(); // most of the validation happens in here and then it calls resource.$update()

                });
                element.addClass('performance-rater');
            };
        }
    };
});

そしてテンプレ

<span class="btn btn-small" ng-repeat="rating in dropdowns.playback" type="checkbox"
   title="{{rating.label}}">{{rating.value}}<i class="icon icon-star{{rating.value == 0 ? '-empty' : ''}}"></i></span>
4

1 に答える 1

2

変更：

element.bind('click', function (ev) {
  tune.resource.$update();
});

に：

element.bind('click', function (ev) {
  scope.$apply(function(){
     tune.resource.$update();
  });
});

トリックを行う必要があります。との違いはbind('click')、角周期ng-clickをトリガーすることですが、そうではありません。またはリクエストは、角度サイクル (内部角度イベント ループ サイクル)内で呼び出された場合にのみ、サーバーへのリクエストをトリガーします。したがって、あなたの場合、角度サイクルの外で呼び出したので、サーバーへの要求は行われませんでしたが、次に角度イベントループがトリガーされて (たとえば、ng-change が実行されたとき)、サーバーへの要求が開始されるまで「スケジュール」されただけです。ng-click$digestbind('click')$http$resource$digestresource.update$digest

于 2013-10-26T17:51:45.997 に答える