Question

这是我的情景。如果表单获取错误消息，我想刷新我的验证码。我有多个视图来使用验证码。

所以我写了一个工厂：

Services.factory 'Captcha', ['$rootScope', ($rootScope) ->
  service = {}
  service.new_captcha = () ->
    console.log 'render cap'
    $rootScope.captcha_src = "/captcha?action=captcha&i=#{+new Date}"
  service
]

然后另一个处理$ http进程的工厂将触发下面的代码

$http
.error (data) ->
  service.signin_err_msg = data.error
  Captcha.new_captcha()
  $rootScope.$broadcast('new_captcha')

在视图控制器中，$ scope值将侦听广播并更改src值。

SignUpCtrl = App.controller 'SignUpCtrl', ($scope, UserService, $location, $rootScope) ->

  $scope.UserService = UserService

  $scope.$on 'new_captcha', (val) ->
    $scope.captcha_src = $rootScope.captcha_src

  $scope.captcha_src = $rootScope.captcha_src

这很有效。但我不认为这是一个好方法。我必须编写相同的代码来监听rootScope广播。有更好的方法吗？

Answer 1

正如rtcherry所说，您不需要使用$rootScope。请查看此Plunker：http://embed.plnkr.co/4ppfCi/preview

Answer 2

无需使用$rootScope或广播任何活动。这也可行：

验证码服务

Services.factory('Captcha', [function() {
  var captchaSrc;
  return {
     get_captcha_src: function() {
       if (!captchaSrc) {
         this.refresh_captcha();
       }
       return captchaSrc;
     },
     refresh_captcha: function() {
       captchaSrc = "/captcha?action=captcha&i=" + new Date();
     }
  }
}]);

HTTP处理程序

$http.error(function(data) {
  service.signin_err_msg = data.error;
  Captcha.refresh_captcha();
});

<强>控制器

var SignUpCtrl = App.controller('SignUpCtrl', function($scope, $location, UserService, Captcha) {
  ...

  $scope.get_captcha_src = function() {
    return Captcha.get_captcha_src();
  }

  // or this: $scope.get_captcha_src = Captcha.get_captcha_src;

});

如何处理角度不同视图的全局服务？

2 个答案: