Question

这是我的工厂：

.factory('userService',()){
  var user = {};
  return {

  getFirstname : function () {
    return user.firstname;
  },

  setFirstname : function (firstname) {
    user.firstname = firstname;
  }

}

我在我的两个控制器MainCtrl和AccountEditCtrl中使用此服务我在我的MainCtrl中使用了我的getFirstname（），在AccountEditCtrl中使用了setFirstname

.controller('MainCtrl',['userService', function(userService){
  $scope.userName = userService.getFirstName();
}]);

.controller('AccountEditCtrl',['userService', function(userService){
      userService.setFirstname("New First Name");
}]);

我的问题是，当我使用userService.setFirstname（）时，$ scope.userName不会在MainCtrl中发生变化。

Answer 1

在某些情况下，$ watch不使用工厂对象。您可以使用事件进行更新。

 app.factory('userService',['$rootScope',function($rootScope){
  var user = {};
  return {

  getFirstname : function () {
    return user.firstname;
  },

  setFirstname : function (firstname) {
    user.firstname = firstname;
    $rootScope.$broadcast("updates");
  }

}
}]);
app.controller('MainCtrl',['userService','$scope','$rootScope', function(userService,$scope,$rootScope) {
  userService.setFirstname("bharat");
  $scope.name = userService.getFirstname();
  $rootScope.$on("updates",function(){
    $scope.name = userService.getFirstname();
  });
}]);

app.controller('one',['userService','$scope', function(userService,$scope) {
  $scope.updateName=function(){
    userService.setFirstname($scope.firstname);
  }
}]);

Here is a working example

Answer 2

在控制器之间使用相同的对象时，您必须使用.service方法定义您的服务，如下所示：

.service('userService',function(){
  this.user = {};

  this.getFirstname = function () {
    return this.user.firstname;
  };

  this.setFirstname = function (firstname) {
    this.user.firstname = firstname;
  };

});

Answer 3

对广播事件使用$ timeout。它会帮助你。

myapp
  app
    bower_components
        angular-bootstrap
        ..........etc
    components
        version.js
    css
        app.css
    js
        app.js
        controllers.js
        services.js
        filters.js
        directives.js
  index.html
  app.yaml

Answer 4

您有两种方法可以解决此问题。

解决方案1 ：

在控制器中添加手表。

.controller('MainCtrl',['userService', function(userService) {

    $scope.userName = userService.getFirstName();

    $scope.$watch(function() {
        return userService.getFirstName();
    }, function(newValue) {
       $scope.username = newValue;
    });
}]);

解决方案第二：

.controller('MainCtrl',['userService', function(userService) {

    $scope.getUsername = function() {
        userService.getFirstName();
    };

}]);

现在你的视图应该直接调用这个函数。

<div class="username">{{getUsername()}}</div>

现在，根据Angular的文档，只要函数调用的返回值发生变化，Angular就会更新视图中的值。

Answer 5

带有getter和setter示例代码的示例工厂

<div ng-app="myApp">
<div ng-controller="FirstCtrl">
  <br>Input is : <strong>{{data.firstName}}</strong>
  <button ng-click="setData()">setData</button>
</div>
<hr>

<div ng-controller="SecondCtrl">
  Input should also be here: {{data.firstName}}
  <button ng-click="getData()">getData</button>
</div>
</div>

var myApp = angular.module('myApp', []);

myApp.factory('Data', function(){

    var service = {
        FirstName: '',
        setFirstName: function(name) {
            // this is the trick to sync the data
            // so no need for a $watch function
            // call this from anywhere when you need to update FirstName
            angular.copy(name, service.FirstName); 
        }
    };
    return service;
});


// Step 1 Controller
myApp.controller('FirstCtrl', function( $scope, Data ){
$scope.setData = function() {
        Data.FirstName='Tridip';
    };
});

// Step 2 Controller
myApp.controller('SecondCtrl', function( $scope, Data ){
    $scope.FirstName = Data.FirstName;

$scope.getData = function() {
        alert('get data '+Data.FirstName)
    };
});

Answer 6

你应该使用$ watch so：

.factory('userService',()){
  return {
     user:{ 'firstname': 'defaultFirstname'},
     getFirstname : function () {
       return user.firstname;
     },

     setFirstname : function (firstname) {
       user.firstname = firstname;
     }
}
.controller('MainCtrl',['userService', function(userService){
  $scope.userName = userService.getFirstname();
  $scope.$watch('userService.user.firstname', function (newVal) {
      $scope.userName = newVal;
  });
}]);

.controller('AccountEditCtrl',['userService', function(userService){
      userService.setFirstname("New First Name");
}]);

在angularjs中获取和设置工厂的价值

6 个答案: