angularjs - how do i avoid $scope.$apply() in the callback -


below code works fine. trying see if there better way write can avoid $scope.$apply() in controller.

when user clicks on "sign up" button, call goes controller , service along callback method. in service, calling parse cloud code create user , calling callback after receive response.

the problem have call $scope.$apply() in callback method in order apply changes vm.m.resp property bound span.

is there way can run whole signup process single transaction , avoid callback?

or

is there way avoid calling $scope.$apply()?

this how ui looks like:

<ion-view title="sign up">   <ion-content class="has-header">     <div class="list">       <label class="item item-input">         <span class="input-label">username</span>         <input type="text" ng-model="vm.m.username">       </label>       <label class="item item-input">         <span class="input-label">password</span>         <input type="password" ng-model="vm.m.password">       </label>       <label class="item">         <button class="button button-block button-positive" ng-click="vm.dosignup()">sign up</button>       </label>     </div>     <div class="list">       <div class="bar bar-header bar-positive">         <span ng-bind="vm.m.resp"></span>       </div>     </div>   </ion-content> </ion-view> 

this how controller looks like:

(function () {     'use strict';      angular.module('app').controller('useradminctrl', ['$stateparams', '$scope', 'useradminapi', useradminctrl]);      function useradminctrl($stateparams, $scope, useradminapi) {         var vm = this;         vm.m = {};         vm.m.username = '';         vm.m.password = '';         vm.m.resp = '';          function dosignup() {              useradminapi.dosignup(vm.m, dosignupcallback);             vm.m.resp = 'signing up. please wait...';         }          function dosignupcallback(resp) {             vm.m.resp = resp;             $scope.$apply()         }         vm.dosignup = dosignup;         vm.dosignupcallback = dosignupcallback;     }; })(); 

this how service looks like:

(function () {     'use strict';      angular.module('app').factory('useradminapi', [useradminapi]);      function useradminapi() {          function dosignup(m,cb) {              parse.cloud.run('createuser', {m}, {                 success: function (result) {                     cb(result);                 },                 error: function (error) {                     cb(error.message);                 }             });         }          return {             dosignup: dosignup         };     }; })(); 

you can use promise digest cycle:

(function () {     'use strict';      angular.module('app').factory('useradminapi', ['$q', useradminapi]);      function useradminapi($q) {          function dosignup(m) {             var deferred = $q.defer();             parse.cloud.run('createuser', {m}, {                 success: function (result) {                     deferred.resolve(result);                 },                 error: function (error) {                     deferred.reject(error);                 }             });             return deferred.promise;         }          return {             dosignup: dosignup         };     }; })(); 

this gives nice , clean error callback well.


Comments

Popular posts from this blog

angularjs - ADAL JS Angular- WebAPI add a new role claim to the token -

php - CakePHP HttpSockets send array of paramms -

node.js - Using Node without global install -