注入服务的角度共享属性不起作用

时间:2013-07-05 15:06:37

标签: angularjs

Plunkr

我在控制器中注入了这项服务。它只是一种分享一些属性的服务。

angular.module('app', []).
service('sharedProperties', function () {
    var list_name = '';

    return {
        getListName: function() {
            return list_name;
        },
        setListName: function(name) {
            list_name = name;
        }
    };
});

我有两个控制器。在第一个中,我设置了list_name的值。在我的第二个,我想重试这些信息。

以下是我的控制器的定义方式:

function ListCtrl($scope, $http, sharedProperties) {
   ...
   $scope.changeListName = function(list_name) {
 sharedProperties.setListName(list_name);
 console.log(list_name, sharedProperties.getListName());    # shows ( 'metro', 'metro')  == metro being a dummy list_name
   ...
};

function ItemCtrl($scope, $http, sharedProperties) {
    ...
    $scope.showOnlyList = sharedProperties.getListName();
    console.log(this.sharedProperties.getListName());           # empty string
    ...
};

我记录了变量并在浏览器控制台中检查了它们,发现ListCtrl正确设置了共享属性。问题来自ItemCtrl控制器。当我尝试使用sharedProperties.getListName();访问list_name时,该属性似乎为空,或者该函数返回一个空字符串。

更新

我认为问题来自服务。所以我决定使用Lungojs' data library

我收到了以下代码:

在ListCtrl中:

$scope.changeListName = function(list_name) {
        Lungo.Data.Cache.set("ListName", list_name);
        console.log('LIST', Lungo.Data.Cache.get("ListName"));
    };

在ItemCtrl中:

$scope.showOnlyList = Lungo.Data.Cache.get("ListName");
console.log('ITEM', Lungo.Data.Cache.get("ListName"));

ListCtrl中的日志显示缓存设置为正确的list_name。但是,ItemCtrl的控制台显示Lungo.Data.Cache.get("ListName")未定义,即使它在ListCtrl上是正确的!

我还尝试用HTML5本地存储替换缓存但没有成功......

1 个答案:

答案 0 :(得分:2)

好吧,我认为是因为你在实例化ItemCtrl后立即将你的sharedListPropery记录到控制台。 实例化时,sharedPropertyList还没有值。

编辑: Sry,JSFiddle目前无法正常工作,所以我必须把这个未经测试的代码放在这里。 但它应该给你一个想法

angular.module('app', []).
service('sharedProperties', function () {
  var list_name = '';

  return {
      getListName: function() {
          return list_name;
      },
      setListName: function(name) {
        list_name = name;
      }
  };
}).
controller('ListCtrl',['$scope','sharedProperties',function(scope,shared){
  console.log(shared.getListName()); //empty, because nothing set yet.
  scope.listname = shared.getListName();
  //watching the change and updating the shared
  scope.$watch('listname',function(value){
    console.log('listname is now '+value);
    shared.setListName(value); 
  })
  //watching the shared directly
  scope.shared=shared;
  scope.$watch('shared.getListName()',function(value){
      console.log("sharedProperty has changed to"+value);
  })

}]);