Angular JS - 父視圖在範圍更改時不更新

我構建了一個簡單的Angular測試應用程序，並遇到了問題。我有一個項目清單和列表底部的「添加項目」鏈接（該清單存儲在一個簡單的NodeJS服務器上）。這個「添加項目」鏈接加載一個子視圖，讓用戶設置新項目的名稱。當用戶點擊完成後，該項目被添加到服務器上的列表中，然後告訴父級列表進行更新。在控制檯中，我可以看到數據正在傳回給父級，但視圖並未反映新的項目列表。我已經看過$ scope。$ apply但是因爲我從來沒有使用過第三方庫我沒有理由使用它（我試過了，它總是給出錯誤「$ digest is already running」在文檔中）。這裏是有問題的代碼：Angular JS - 父視圖在範圍更改時不更新

HTML父列表

<ul data-ng-controller="listCntrl"> 
    <li data-ng-repeat="item in items"> 
     <a href="#/item/{{item.name}}">{{item.name}}</a> 
    </li> 
    <li><a href="#/new">Add Item</a></li> 
</ul> 
<div data-ui-view></div> <!--Child view loaded here-->

HTML子視圖

<div data-ng-controller="newItemCntrl"> 
    <input type="text" data-ng-model="name"></input> 
    <a data-ng-click="addItem()">Done</a> 
</div>

控制器

app.controller('listCntrl',function($scope, ListFactory){ 
    ListFactory.getItems().success(function(data){ 
     $scope.items = data; 
    }); 

    $scope.update = function(){ 
     ListFactory.getItems().success(function(data){ 
      console.log(data); //The correct list is in data 
      $scope.items = data; //This doesn't cause the view to update! 
     }); 
    } 
}); 

app.controller('newItemCntrl',function($scope){ 
    $scope.addItem = function(){ 
     $http({ 
      method: 'POST', 
      url: '/addItem', 
      data: JSON.stringify({name: $scope.name}), 
      headers: {'Content-Type': 'application/json'}, 
     }) 
     .success(function(){ 
      $scope.$parent.update(); 
     }); 
    } 
});

廠

app.factory('ListFactory', function($http){ 
    return { 
     getItems: function(){ 
      return $http({ 
       method: 'POST', 
       url: '/getItems', 
       headers: {'Content-Type': 'application/json'} 
      }); 
     } 
    }    
});

一切工作在服務器端，並在它打印出的更新列表，update（）函數，但不知何故$ scope.items分配不會導致列表視圖進行更新。如果我刷新頁面，則列表顯示正確。我在這裏做錯了什麼？我猜這是我對$ scope的理解問題。$ parent但我似乎無法弄清楚。感謝您的幫助！

來源

2013-07-11 ORL

'listCntrl'控制器在元素上，而'newItemCtrl'綁定到data-ui-view的子視圖，該元素是元素的同級元素，而不是子元素。

因此，在newItemCtrl中創建的作用域的主鏈中沒有由listCntrl創建的作用域。

嘗試這樣：

<div data-ng-controller="listCntrl"> 
    <ul> 
     <li data-ng-repeat="item in items"> 
      <a href="#/item/{{item.name}}">{{item.name}}</a> 
     </li> 
     <li><a href="#/new">Add Item</a></li> 
    </ul> 
    <div data-ui-view></div> <!--Child view loaded here--> 
</div>

順便說一句，你實際上並不需要使用$ $範圍母公司在這種情況下。所有兒童範圍（但不是孤立的範圍）都有其父母的原型遺傳，即scope.__proto__ === scope.$parent。只要使用$ scope.update（）就足夠了，只要此範圍與定義更新函數的父範圍之間沒有指令構成隔離範圍即可。

來源

2013-07-11 01:18:25

謝謝！這解決了問題！ – ORL

這是個好主意。我不明白「更新」功能如何被調用，儘管... –

我認爲他通過其他方式運行'update'方法，而不是通過'addItem'方法。 –

Angular JS - 父視圖在範圍更改時不更新

回答

相關問題