Angularjs保留局部变量

时间:2016-12-29 17:06:07

标签: javascript angularjs

我有这样的工厂:

TestFactory= function () {
    var objectName=null;

    return {
        SetName:function(name) {
            objectName = name;
        },
        GetName:function() {
            return objectName;
        },
        Init:function() {
            return angular.copy(this);
        }
    }
}

控制器如:

TestController = function($scope) {
    $scope.TestClick = function () {

        var tstA = TestFactory.Init();
        var tstB = TestFactory.Init();

        tstA.SetName('test A')
        tstB.SetName('test B')

        console.log('A', tstA.GetName());
        console.log('B', tstB.GetName());

    }   
}

在控制台中,我得到两个对象Test B

如何制作此对象的正确实例?

我想在工厂的其他功能中使用objectName值。

4 个答案:

答案 0 :(得分:2)

考虑到在Angular中,工厂是单身人士,所以实例总是一样的。

您可以执行以下操作:

TestFactory= function () {
    var objectName={};

    return {
        SetName:function(property,name) {
            objectName[property] = name;
        },
        GetName:function(property) {
            return objectName[property];
        },
        Clear:function(property) {
            delete objectName[property]
        }
    }
}

然后在你的控制器中:

TestController = function($scope, TestFactory) {
    $scope.TestClick = function () {

        TestFactory.SetName('a','test A')
        TestFactory.SetName('b','test B')

        console.log('A', TestFactory.GetName('a')); // test A
        console.log('B', TestFactory.GetName('b')); // test B

    }   
}

答案 1 :(得分:1)

一些问题。首先从工厂返回一个对象而不是一个函数。

app.factory('TestFactory', function() {
  return function() {
    var objectName = null;

    var setName = function(name) {
      objectName = name;
    };

    var getName = function() {
      return objectName;
    };

    return {
      SetName: setName,
      GetName: getName
    };
  };

});

然后你可以像这样实例化:

var tstA = new TestFactory();
var tstB = new TestFactory();

答案 2 :(得分:1)

服务和工厂都是单身,所以我认为你可以通过提供一个Init函数来更合理地使用工厂来实现你想要的,它返回公共代码和唯一名称,如下所示:

angular.module('app')
       .factory('ServiceFactory', serviceFactory);

function serviceFactory() {
    return {
        Init: function (name) {
            return {
                objectName: name,
                setName: function (name) {
                    this.objectName = name;
                },
                getName: function () {
                    return this.objectName;
                }
            };
        }
    };
}

这样就可以将它用作可以初始化多种类型的工厂。

答案 3 :(得分:0)

你基本上需要创建一个简单的getter / setter。

angular.module('app', [])
  .controller('TestController', testController)
  .service('serviceFactory', serviceFactory);


testController.$inject = ['serviceFactory'];

function testController(serviceFactory) {

  serviceFactory.set('A', {
    name: 'test A'
  });

  serviceFactory.set('B', {
    name: 'test B'
  });

  console.log(serviceFactory.getAll());
  console.log(serviceFactory.get('A'));
  console.log(serviceFactory.get('B'));

}

function serviceFactory() {
  var 
  _model = {
    name: ""
  },
  _data = {};

  return {
    set: function(key, data) {
      _data[key] = angular.extend({}, _model, data);
    },
    get: function(key) {
      return _data[key];
    },
    getAll: function() {
      return _data;
    }
  }


}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.22/angular.min.js"></script>

<body ng-app="app" ng-controller="testController"></body>