Databases
StackOverflow2013
Postsdbo
POWhy has replacing ng-select with a custom directive caused $http requests not to be sent every other time
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POWhy has replacing ng-select with a custom directive caused $http requests not to be sent every other time
    text
    copied!<p><em>edit I've now fixed the bug by using <code>ng-click</code> in the directive's template, but I'm still interested to know what <code>ng-click</code> does that's different to <code>element.bind</code> and why it's important</em></p> <p>I did have a ng-select box to update my model</p> <p><code> &lt;td&gt;&lt;select ng-model="tune.dummyStandard" ng-options="opt.value as opt.label for opt in dropdowns.playback" ng-change="update()" &gt; &lt;option value=""&gt;-- rate performance --&lt;/option&gt; &lt;/select&gt;&lt;/td&gt; </code></p> <p>At the end of a long validation process, it created a new <code>$http</code> request (via <code>$resource.$update</code>) and saved the record.</p> <p>I've now changed to use a custom directive</p> <p><code> &lt;td j-performance-rater data-tune="tune"&gt;&lt;/td&gt; </code></p> <p>which attaches the following listener (the actual listener is a little more complicated but I've checked quite rigorously that it always fires <code>tune.resource.$update</code> as expected)</p> <pre><code>element.bind('click', function (ev) { // code for validation and setting of model props tune.resource.$update(); }); </code></pre> <p>Now odd-numbered clicks create the <code>$http</code> object but don't send, and the even-numbered clicks send the previously created <code>$http</code> object and create and successfully send a new one. This happens consistently even when the clicks are on different instances of the directive. I've tried playing around with <code>$digest</code> and <code>$apply</code> on the scope but they don't have any impact (and I'm not sure if they should as <code>$http</code> seems to me like it should behave independently of the digest cycle).</p> <p>Can anyone think what the problem might be?</p> <h2>Full directive code</h2> <pre><code>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') &gt; -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'); }; } }; }); </code></pre> <h2>And the template</h2> <pre><code>&lt;span class="btn btn-small" ng-repeat="rating in dropdowns.playback" type="checkbox" title="{{rating.label}}"&gt;{{rating.value}}&lt;i class="icon icon-star{{rating.value == 0 ? '-empty' : ''}}"&gt;&lt;/i&gt;&lt;/span&gt; </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload