关于angularjs：在angularjs中获取和设置工厂值


getting and setting value in factory in angualrjs

这是我的工厂：

1
2
3
4
5
6
7
8
9
10
11
12
13
.factory('userService',()){
  var user = {};
  return {

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

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

}

我在我的两个控制器mainctrl和accounteditcrl中使用这个服务我在mainctrl中使用getfirstname()，在accounteditcrl中使用setfirstname

1
2
3
4
5
6
7
.controller('MainCtrl',['userService', function(userService){
  $scope.userName = userService.getFirstName();
}]);

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

我的问题是，当我使用userservice.setfirstname()时，$scope.username不会在mainctrl中更改。

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
 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);
  }
}]);

这是一个有效的例子

相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
app.factory('userService',['$rootScope',"$timeout", function($rootScope, $timeout){
var user = {};
return {

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

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

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

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

1
2
3
4
5
6
7
8
9
10
11
12
.service('userService',function(){
  this.user = {};

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

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

});
相关讨论

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
  Input is : {{data.firstName}}
  <button ng-click="setData()">setData</button>




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



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

你有两个选择来克服这个问题。

解决方案第一：

在控制器中添加手表。

1
2
3
4
5
6
7
8
9
10
.controller('MainCtrl',['userService', function(userService) {

    $scope.userName = userService.getFirstName();

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

解决方案第二：

1
2
3
4
5
6
7
.controller('MainCtrl',['userService', function(userService) {

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

}]);

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

1
{{getUsername()}}

现在，根据Angular的文档，每当函数调用的返回值更改时，Angular将更新视图中的值。

相关讨论

你应该使用$watch，所以：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
.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");
}]);