0

编辑我现在已经通过ng-click在指令的模板中使用修复了这个错误，但我仍然有兴趣知道ng-click它有什么不同element.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-click触发角$digest循环，而bind('click')不会触发。任何$http或请求仅在角周期（内部角事件循环周期）内$resource调用时才会触发对服务器的请求。$digest因此，在您的情况下，您调用了resource.update但在角度$digest周期之外，因此没有发出对服务器的请求，而只是“调度”到下一次触发角度事件循环（例如，当执行 ng-change 时）并发起对服务器的请求。

于 2013-10-26T17:51:45.997 回答