Question

嗨，我有一个问题。我的工厂里有一个对象如下：

User: {
   EmailAddress: ""
}

每当我进行http调用时，我想更新User.EmailAddress whith返回的值。在工厂内做这件事的最佳方法是什么？所以在控制器级别我可以将$ scope.Email绑定到工厂变量。这就是我现在正在做的事情

GetLogOnModel: function () {
    if ($location.path().indexOf("login") == 1) {
        var promise = $http.get(config.headers.url + "LogOn").then(function (response) {
            // The return value gets picked up by the then in the controller.
            User.EmailAddress=response.data.Email;
            return response.data
        });
        return promise;
        // Return the promise to the controller
    }
}

在控制器

中

AccountFactory.GetLogOnModel().then(function (data) {
  $scope.logOnModel = data;
}, function (err) {
  console.log(err.reason);
  alert(err.reason);
});

Answer 1

原始类型（如字符串）不受引用约束。因此，您无法直接将范围属性绑定到EmailAddress，并期望它自动更新另一方面，对象通过引用绑定，因此您可以执行以下操作：

app.factory('AccountFactory', function (...) {
  ...
  var User = {
    ...
    EmailAddress: null
  };

  function getLogOnModel() {
    $http.get(...).then(function (response) {
      User.EmailAddress = response.data.Email;
    });
  }

  // Init model (or leave it for the controller to init it)
  getLogOnModel();

  return {
    ...
    User: User,
    getLogOnModel: getLogOnModel
  };
});

app.controller('someCtrl', function (..., AccountFactory) {
  $scope.user = AccountFactory.User;
  // Now you can reference `$scope.user.EmailAddress`
  // and it will be kept in sync with `AccountFactory.User.EmailAddress`
});

Answer 2

应该非常直截了当。您可以将服务实例或仅电子邮件属性绑定到$scope。

我只是在5秒后更新电子邮件。

myApp.factory('myService', function($http, $timeout) {
    return {
        email: 'foo@bar.com',
        updateEmail: function() {
            var self = this;
            $timeout(function() {                
                $http.get('/echo/json/').success(function() {
                    self.email = 'bar@foo.com';
                });
            }, 5000);
        }
    };
});

第一种方法： 将整个服务绑定在范围内：

function MyCtrl($scope, myService) {
    $scope.myService = myService;
    myService.updateEmail();
});

<div ng-controller="MyCtrl">
  myService: {{myService.email}}! 
</div>

第二种方法 只需为电子邮件更新创建自定义$watch：

function MyCtrl($scope, myService) {
    $scope.email = myService.email;
    myService.updateEmail();

    $scope.$watch(function() { return myService.email; }, function(newVal, oldVal) {
       $scope.email = newVal;
    });
}

<div ng-controller="MyCtrl">
  $scope: {{email}}
</div>

我建议使用第一种方法，因为它只需要一个$watch来更新DOM，即{{myService.email}}，而第二种方法需要两个$watches，即一个更新$ scoped模型（ $scope.$watch）和其他将DOM更新为{{email}}。

演示：http://jsfiddle.net/HB7LU/3015/

更新Angular工厂变量时更新控制器变量

2 个答案: