angularJS工厂未在视图之间保存$scope状态

所以我一定是做错了什么。我已经阅读了有关这方面的帖子，这里的大多数建议都建议建立一个工厂来保存跨视图的$scope数据。因此，我创建了一个工厂来绑定从选项复选框接收的$scope数据，但是它不能在视图之间持久化。这是有问题的代码。。有什么想法吗？？谢谢

我的模块

var app = angular.module('app', ['ngMaterial','ui.router']);

我的工厂

app.factory('Options', function() {
  var flavors = {};

  flavors.getFlavors = function() {
  return [
  { name: 'Vanilla', wanted: false },
  { name: 'Hazelnut', wanted: false },
  { name: 'Almond', wanted: false },
  { name: 'Caramel', wanted: false }]; 
  };

  return flavors;

});

我的控制器

app.controller('OrderFormController', function($scope, Options) {

  $scope.flavors = Options.getFlavors();

});

我的html选项标记

<md-list-item ng-repeat="flavor in flavors" 
              layout="row">
              <p> {{ flavor.name }} </p>
              <span flex></span>
              <md-checkbox aria-label="flavor.wanted"
                           class="md-accent" 
                           ng-model="flavor.wanted">
              </md-checkbox>
</md-list-item>

这将很好地加载数据，并在不同视图之间保持数据。。但是，正如下面提到的，我现在有一个问题：所有创建的子$scope当然都链接到父$scope中的值。下面给了我一个很好的启动，但仍然无法基于名称或id创建唯一的$scope。。我本来打算写一篇新文章，但为了把所有内容都放在一页上，我想我应该更新一下文章。因为味道的值已经初始化了，我不确定我是否需要在工厂内重新初始化它们。

你需要更改吗

$scope.flavors=Options.flavors.getFlavors（）

而不是

$scope.flavors=Options.getFlavors（）

因为您的工厂只返回了
flavors
对象。它不返回
getFlavors（）
函数
 工厂本身可能是一个单例，这使得它可以跨视图工作，但是从
getFlavours（）
返回的对象每次调用时都是列表的一个新实例。这就是为什么它似乎没有记录您的更改：它首先记录了更改，但在您再次尝试获取更改时，会立即用默认值重置更改

您需要确保每次调用给定产品的列表实例时都返回相同的列表实例

通常情况下，按产品进行分离会很简单，因为我们知道每个ng重复都有自己的子范围，该子范围可以包含该产品风味的单独实例。但是，因为您想要持久化那些需要单例服务的对象，所以需要在该服务中按产品显式地映射它们。要使用它，您的
getFlavors（）
需要将产品名称作为参数来唯一标识它

app.factory('Options', function() {
    // To create a new set of flavors with default settings
    function initFlavors() {
        return [
            { name: 'Vanilla', wanted: false },
            { name: 'Hazelnut', wanted: false },
            { name: 'Almond', wanted: false },
            { name: 'Caramel', wanted: false }
        ];
    }

    var flavorsByProduct = {};

    // Get the flavors for a given product
    flavorsByProduct.getFlavors = function(productName) {
        // On first access for a particular product, create a new set of flavors for it
        if(!flavorsByProduct[productName]) {
            flavorsByProduct[productName] = initFlavors();
        }
        return flavorsByProduct[productName];
    };

    return flavorsByProduct;
});

我假设控制器是在路由中设置的？你收到了什么输出？困惑。。。是否要在视图之间保留复选框选择？控制器已在路由中设置，并且未记录任何错误。@Jonathan Levinyes我想在视图中保留复选框选择。我有一个签出视图，它将根据这些选择更新价格@ABOsTypeError:Cannot read属性'getFlavors'的undefined
在new（index.js:93）
在Object.e[as invoke]（angular.min.js:37）
在G.instance（angular.min.js:76）
在angular.min.js:59
在r（angular.min.js:7）
在J（angular.min.js:59）
在g（angular.min.js:52）
在angular.min.js:51
在angular.min.js:52
在k（angular.min.js:57）这将不起作用，因为.flavors没有作为工厂制造的服务的属性添加，这是正确的。看看我的答案。嗨，谢谢。这会在视图中保留$scope状态，但每个产品都具有相同的选项值。。我正在尝试为我的ng repeat指令中的每个产品创建一个新实例…我忘记从产品页面添加html标记。。。如果需要的话，我可以在回家后更新我的帖子。你展示的ng repeat只不过是列举口味而已——所以你有另一个不同产品的重复，对吗？大概每个产品都有不同的口味，所以您试图为每个单独的产品保留所选的口味….？好的，刚刚看到您添加的关于缺少产品标记的评论-如果您能证明这会有所帮助，那么是的。如果每个产品都有某种标识符/唯一名称，那么就可以很容易地完成-我会等待。是的，确切地说，但是当我为每个产品创建新实例时（再次抱歉没有发布标记），这些值会重置为默认值。感谢您花时间提供帮助。item.name是唯一的，还是有其他标识符？
getOptions(); 

app.factory('Options', function() {
    // To create a new set of flavors with default settings
    function initFlavors() {
        return [
            { name: 'Vanilla', wanted: false },
            { name: 'Hazelnut', wanted: false },
            { name: 'Almond', wanted: false },
            { name: 'Caramel', wanted: false }
        ];
    }

    var flavorsByProduct = {};

    // Get the flavors for a given product
    flavorsByProduct.getFlavors = function(productName) {
        // On first access for a particular product, create a new set of flavors for it
        if(!flavorsByProduct[productName]) {
            flavorsByProduct[productName] = initFlavors();
        }
        return flavorsByProduct[productName];
    };

    return flavorsByProduct;
});