如何在DOM中更改屬性並將其保存回模型以在單獨的視圖中使用？

Question

我創建了一個小的單頁Angular應用程序。 我有每個項目都可見的主視圖。 我需要允許用戶“收藏”一個項目並使該項目顯示在其他兩個視圖上。 用戶還可以從三個視圖中的任何一個“取消收藏”該項目，從而從其他兩個視圖中將其刪除（僅在主視圖中顯示）。

我認為我可以使用復選框更改模型，但我無法確定，因為它不會在外部JSON中更新。 我想找到一種方法將視圖更改保存到模型中，然后保存模型，以使其在所有視圖中保持不變。

這是標記：

<label><input type="checkbox" ng-model="item.isFavorited"></input></label>

控制器將模型請求為JSON：

[   
   {
        "isFavorited": true,
        "name": "Ford Taurus",
        "vendor": "Hertz"
    }
]

我看過$ watch，ng-change，服務，指令等。我認為我誤解了Angular的基本組成部分。 關於如何實現這一目標的任何想法？

Answer 1

您的問題是由孤立的作用域引起的。 當您在主控制器內部或主控制器旁邊創建新控制器時，它們每個都有自己的作用域。 子作用域可以看到其父作用域，但是處於只讀模式。

您的問題有2種解決方案。 您可以使用rootScope存儲項目並在rootScope中添加函數以編輯此數組。 這是一個糟糕的設計。

Angular真正要做的事情就是使用服務。 服務由所有控制器共享，甚至在視圖之間持久存在。 該服務將保存數據，並允許您通過方法進行訪問。

該服務將完成這項工作：

var app = angular.module('plunker', []);

app.factory('FavoritesService', function() {
  var items = [{
        "isFavorited": false,
        "name": "Ford Taurus",
        "vendor": "Hertz",
        "id" : 1
    }, 
    {
        "isFavorited": false,
        "name": "Honda Civic",
        "vendor": "Hertz",
        "id" : 2
    },
    {
        "isFavorited": false,
        "name": "Ford F150",
        "vendor": "Other",
        "id" : 3
    }];

    return {
      getItems: function() {
        return items;
      },
      addItem: function(item) {
        var currentIndex = items.length + 1;
        item.id=currentIndex;
        items.push(item);
      },
      toggleFavorite: function(id) {
        for (var i = 0; i < items.length; i++) {
          if (id == items[i].id) {
            items[i].isFavorited = !items[i].isFavorited;
            break;
          }
        }
      },
      getFavorites: function() {
        var fav = [];
        for (var i = 0; i < items.length; i++) {
          if (items[i].isFavorited) {
            fav.push(items[i]);
          }
        }
        return fav;
      }
    }
  });

該服務允許您獲取數據，切換收藏夾標志或添加新項目。

然后，您將使用控制器在視圖和數據之間創建鏈接：

$scope.getItems = function() {
  return FavoritesService.getItems();
}

$scope.toggleFavorite = function(id) {
  return FavoritesService.toggleFavorite(id);
}

最后，您可以使用以下內容對數據進行迭代：

<div ng-repeat="item in getItems()">{{item.name}} - {{item.isFavorited}}
  <button ng-click="toggleFavorite(item.id)">Toggle favorite</button>
</div>

我做了一個小矮人，向您展示如何使用它。 您會注意到，我在項目中添加了一個ID以幫助我識別它們，但是您可以不用它。 在插入器中，您可以看到3個共享相同數據的控制器。 子控制器僅顯示收藏夾，並允許您添加新項目。 它顯示了您從服務中獲得多少控制權。

柱塞

祝好運！