從角度更新子級的父范圍

Question

我對這一切真的很陌生，但是我創建了一個小型應用程序，可以在其中添加帶有詳細信息的項目，並使用ionic，cordova和angularjs更新它們，而Im在以下情況中苦苦掙扎：

我有這樣的離子視圖設置：

index.html的：

<div ng-controller="mainController">
  <ion-nav-view>

  </ion-nav-view>
</div>

list.html：

<ion-content>
    <ion-list>
        <ion-item ng-repeat="item in items track by $index | filter:search" ui-sref="detailView({itemId: $index})">{{ item.name }}</ion-item>
    </ion-list>
</ion-content>

add.html：

<ion-content>
    <label class="item item-input">
        <input type="text" ng-model="item.name" placeholder="Item title..."/>
    </label>
    <label class="item item-input">
        <textarea cols="30" rows="10" ng-model="item.field1" placeholder="Field1..."></textarea>
    </label>
    <label class="item item-input">
        <textarea cols="30" rows="10" ng-model="item.field2" placeholder="Field2..."></textarea>
    </label>
    <div class="row">
    <div class="col col-33"></div>
    <div class="col col-33">
        <button class="button button-block" ng-click="addItem()">Add</button>
    </div>
    <div class="col col-33"></div>
    </div>
</ion-content>

然后我建立了一個工廠，我現在正在對其進行測試，它看起來像這樣：

廠：

.factory('itemFactory', ['$cordovaFile', '$q', function ($cordovaFile, $q) {
var itemFactory = {};

itemFactory.get = function () {
  var deferred = $q.defer();

  $cordovaFile.checkFile('items.json')
    .then(function (result) {

      $cordovaFile.readAsText('items.json')
        .then(function (result) {
          var parsedResult = JSON.parse(result);
          deferred.resolve(parsedResult)
        }, function (err) {
          deferred.resolve([]);
        })

    }, function (err) {

      switch(err.code) {
        case 1:
          $cordovaFile.createFile('items.json');
          deferred.resolve([]);
      }

    });

  return deferred.promise;
};

itemFactory.add = function (itemsFromScope, newItem) {
  var deferred = $q.defer(),
    dataToWrite;
  itemsFromScope.push(newItem);

  dataToWrite = JSON.stringify(itemsFromScope);

  $cordovaFile.writeFile('items.json', dataToWrite, {append: false})
    .then(function (result) {
      deferred.resolve(itemsFromScope);
    },function (err) {
      console.log("Write failed");
      deferred.reject(err);
    });

  return deferred.promise;
};

return itemFactory;

  }]);

然后是mainController：

  .controller('mainController', function ($scope, itemFactory) {
    $scope.items = [];
    itemFactory.get()
      .then(function (result) {
        $scope.items = result;
      });
  })

然后是addController：

  .controller('addController', function ($scope, $location, itemFactory) {
    $scope.newItem = {};

    $scope.newItem.name = "";
    $scope.newItem.field1 = "";
    $scope.newItem.field2 = "";


    $scope.addItem = function () {

      itemFactory.add($scope.items, $scope.newItem)
        .then(function (result) {
          $scope.items = result;
        });

      $scope.title="";
      $scope.field1="";
      $scope.field2="";

      $location.path('/').replace();
    };

    $scope.goBack = function () {
      $scope.title="";
      $scope.field1="";
      $scope.field2="";
      $location.path('/').replace()
    };


  })

使用ui-router將控制器加載到視圖。

現在一切都很好，可能不是最佳的選擇，但是，嘿，我只是嘗試一下。 但是當我注意到在我的addController中有$scope.field1="";時，奇怪的部分開始了$scope.field1=""; 等等，而不是$scope.newItem.field1 = ""; 。 因此，我決定修復它們，並且在修復之后，添加不再起作用。 我沒有在mainController的$ scope.items中添加正確的值，而是得到了空項目。 當我在iOS模擬器上運行此代碼時，列表中添加了一個空行。 如果我重新啟動模擬器，那么新項目就會顯示出來。 我認為現在可以在錯誤的時間刷新某些內容，但是我無法弄清楚是什么地方。 有任何提示或解釋嗎？

編輯：添加了具有類似問題的JS小提琴以簡化操作： http : //jsfiddle.net/9gx3tfmy/如您所見，數據已添加到工廠中的數組中，但ui並未更新

EDIT2：實際上，nvm可以在jsfiddle上運行，但是與ionic和它的視圖完全相同的功能不起作用。 我刪除了代碼的$ cordovaFile部分，但即使在瀏覽器上也是如此。 我將檢查是否可以將jsfiddle更新為類似狀態

EDIT3：現在我設法使其在jsfiddle中工作，但是直到今天晚些時候才能在我的項目中嘗試。 在這里工作的小提琴： http : //jsfiddle.net/9yhryL6y/8/

如果我不將$ scope.newItem = {}添加到a​​ddController，則將這些項作為未定義添加。

Answer 1

看起來您的輸入字段綁定到$scope.item中的$scope.item而不是newItem ，因此，當您嘗試添加$scope.newItem它可能仍然是默認的空項目。

嘗試：

<label class="item item-input">
    <input type="text" ng-model="newItem.name" placeholder="Item title..."/>
</label>
<label class="item item-input">
    <textarea cols="30" rows="10" ng-model="newItem.field1" placeholder="Field1..."></textarea>
</label>
<label class="item item-input">
    <textarea cols="30" rows="10" ng-model="newItem.field2" placeholder="Field2..."></textarea>
</label>

另外，JSFiddle無法正常工作的原因還在於，您正在向items數組中添加諸如“ value1”之類的字符串，但是它期望一個具有name屬性的對象。

另一件需要警惕的事情是，只是將范圍變量推入items數組中，因為它沒有創建新對象，您只是將輸入綁定到的模型推入了數組中。 示例： http ： //jsfiddle.net/9yhryL6y/

ionic ToDo列表演示對於將新對象推入ng-repeat數組的示例可能有用。 https://github.com/driftyco/ionic-todo/blob/master/www/js/app.js

Answer 2

所以我終於想通了。 我的問題是我對Angular誤解了兩件事。 我從工廠返回了一個完整的對象，並將其一部分直接綁定到范圍，如下所示：

.controller('myController', ['$scope', 'myFactory', function ($scope, myFactory) {
  $scope.items = myFactory.items;
})])
.factory('myFactory', function () {
  var factoryItems = {};

  factoryItems.items = ['item1', 'item2'];
});

現在，當我在Factory中更新數組時，它的范圍沒有更新。 因此將綁定更改為：

$scope.myFactory = myFactory;

然后在視圖中使用如下工廠：

ng-repeat="item in myFactory.items track by $index"

這解決了問題。 這篇文章對我有很大幫助：

綁定到控制器作用域的工廠中的已修改數據，不會更新