Angularjs 如何避免回调中的$scope.$apply（）

下面的代码工作正常。我只是想看看是否有更好的方法来编写它，这样我就可以避免控制器中的

$scope.$apply（）

当用户单击“注册”按钮时，呼叫会转到控制器，然后再转到服务以及回调方法。在服务中，我调用Parse Cloud代码来创建用户，并在收到响应后调用Callback

问题是我必须在回调方法中调用

$scope.$apply（）

，以便将更改应用于绑定到span的

vm.m.resp

属性

是否有一种方法可以将整个注册过程作为一个事务运行并避免回调

或

有没有办法避免调用

$scope.$apply（）

这就是我的UI的外观：

<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>

(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;
    };
})();

(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
        };
    };
})();

我的服务就是这样的：

<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>

(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;
    };
})();

(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
        };
    };
})();

---

您可以使用承诺回到摘要周期：

(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
        };
    };
})();

---

这也为您提供了一个漂亮而清晰的错误回调。

这是一个可能不可避免的使用案例，

$scope.apply（）

。使用

$scope.apply（）的主要原因

根本就是在angular不知道的情况下，每当非angular代码修改应用程序中的变量时触发摘要。你可以用

$q

@DanielA.White包装任何承诺。你的意思是用$q包装工厂中的doSignUp函数吗？@Asdfg我添加了我的答案。@DanielA.White:效果很好。非常感谢。非常感谢。