Javascript 角度工厂/服务的单独实例

我有一个工厂函数，它有一些数据，还有一些函数可以处理数据。该数据在应用程序中使用多次，在某些点上，数据位于页面上，然后在模式中打开-在模式中操作数据会更改背景页面中的数据。创建单独的数据实例的最“有角度的方式”是什么

更新：

工厂：

factory('filterFactory', [function () {


return {
    getGroups: function(term){
        // TODO: get terms groups with $http
        if(term){
            // get terms
        }
        else {
            return this.terms;
        }
    },
    addGroup: function(group){
        for (var term in this.terms) {
            if(this.terms[term].name === group){
                this.terms[term].included = true;
            }
        }
    },
    removeGroup: function(group){
        for (var term in this.terms) {
            if(this.terms[term].name === group){
                this.terms[term].included = false;
            }
        }
    },
    selectGroup : function(group){
        for (var term in this.terms) {
            if(this.terms[term].name === group){
                this.terms[term].included = true;
            } else {
                this.terms[term].included = false;
            }
        }
    },
    setAll : function(value){
        for (var term in this.terms) {
            this.terms[term].included = value;
        }
    },

    isCollapsed: true,

    terms: {
        people: {
            included: false,
            name: 'person',
        },
        organizations: {
            included: false,
            name: 'organization',
        },
        ...
    }

};

}])

尝试的实现：

    $scope.newTermMeta.type = filterFactory;

var temp = filterFactory;
$scope.newTermMeta.type = temp.terms;

$scope.newTermMeta.type = filterFactory.getGroups();

var temp = filterFactory;
$scope.newTermMeta.type = temp.terms;

$scope.newTermMeta.type = Object.create(filterFactory.getGroups());

注意：上述实现均未创建独立实例

模板代码：

<div class="modal-body">

    <form>
        <label> 
            <h2>{{newTermMeta.name}}</h2>
        </label>
        <br>
        <span>Add your term to relevant term groups:</span>
        <br>
        <div class="well well-sm col-sm-8">
            <button ng-repeat="group in newTermMeta.type" btn-checkbox class="btn btn-sm btn-default margin5" type="button" ng-model="group.included">{{group.name}}</button>
        </div>
        <br>
        <span>Optional:</span>
        <br>
        <label> Enter a concise (at most one sentence) definition for this term:</label>
        <input class="form-control width80p" type="text" ng-model="newTermMeta.definition">
    </form>
</div>

{{newTermMeta.name}


将您的术语添加到相关术语组：


{{group.name}


可选：


输入此术语的简明定义（最多一句话）：

factory对象是一个共享实例，因此您在该factory对象中所做的任何更改都会对使用它的每个人都有所改变

工厂是正确的做法，但听起来您希望将其封装在不同的范围内。这对于Angular来说相当容易，因为所有控制器都有自己的作用域，指令也可以选择拥有自己的作用域。假设您在控制器中显示它，您可以执行以下操作：

myapp.controller('OtherCtrl', [ 'MyFactory', '$scope', function(MyFactory,$scope) {

  // create a defensive copy of the factory object by creating a new object with the wrapped object as its prototype chain, anything can then access the data but changing the properties change only on $scope.theObject directly
  $scope.theObject = Object.create(MyFactory.getTheObject());

 // alternatively, copy the relevant properties into our scope, it's protected but you won't be updated when the factory object changes unless you also specify a $watch statement
 var obj = MyFactory.getTheObject();
 $scope.name = obj.name;

}]);

更新：警告

使用Object.create（）防御性复制机制时需要注意的一点是，它只会对修改的属性进行JSON字符串化。如果您打算修改一个属性，然后将整个对象提交回服务器，那么它将不起作用。对于只读属性，或者仅序列化修改的属性，它确实非常有效。Angular将在不使用$watch的情况下更新未修改属性的值，因为它仍然可以通过原型链检测更改

---

这里展示了JSON.stringify和原型链值之间的差异

没有问题。使用Object.create（）变体时需要注意的一点是，如果您打算按原样将其提交回服务器，则它不会正确序列化为JSON。我对只读视图使用Object.create copy，我很喜欢，但是如果是针对提交回来的表单对象，您可能需要使用第二个选项创建一个包含值副本的范围对象。我的用例无法使用这个选项。似乎我没有正确地实现您的解决方案，或者由于工厂的数据绑定特性，它不是实现这一点的最佳方式。我已经用工厂更新了这个问题-没有一个实现的解决方案使第二个控制器中的实例独立于其他控制器。很抱歉，它不起作用。您可以添加修改/呈现数据的代码吗？这些单独的实例是否在不同的控制器中，或者您是否在共享控制器中设置$scope.newTermMeta？newTermMeta仅存在于一个控制器中（newTermModalInstanceCtrl）。这似乎是一个类似问题的最佳答案。这是一把小提琴，展示了Object.create方法。我相信它实际上是等价的，因为Object.create在封面下使用“new”。我还认为，如果返回的实例引用了一个共享的对象数组，那么这种方法也会有同样的缺点。它可能是您看到的，因为“术语”是一个对象数组。