AngularUI視圖在模型更改後不更新

AngularUI在模型更改後更新視圖的初級問題。我有一份食譜清單，每份食譜都有清單成分。 $ http GET成分後，我的嵌套循環沒有更新。因爲其他ng-repeat帖子沒有幫助，我想知道這是否是我的AngularUI（UI）代碼。AngularUI視圖在模型更改後不更新

模型更改後應如何更新子視圖？是否需要範圍觸發器？

的index.html：

<body> 
    <div ui-view></div> 
    .... 
    #Outer 
    <script type="text/ng-template" id="front.html"> 
     <div ng-repeat="search in searches" ng-class="{starred: search.isStarred, active: search.isActive, editing: search.isediting}" class="row"> 
      <ng-include src="'grid.html'"></ng-include> 
    .... 
    #Inner 
    <script type="text/ng-template" id="grid.html"> 
     <ng-repeat="item in search"> 
     <!-- item in $scope.searches[$index].results --> 
     <!-- item in $parent[$index].results --> 
      <li>{{item.searchId}}</li> 
      <!--<ng-include src="'image-item.html'"></ng-include>-->

app.js：

angular.module('tycho', ['ui.router', 'ui.bootstrap', 'tychoControllers', 'tychoDirectives', 'tychoServices']) 
.config(function($stateProvider, $urlRouterProvider) { 

$urlRouterProvider.otherwise("/front"); 

$stateProvider 
.state('front', { 
    url: "/front", 
    controller: 'tychoController', 
    templateUrl: 'front.html' 
})

controllers.js：

var controllers = angular.module('tychoControllers', []); 
controllers.controller('tychoController', 
['$scope', '$filter', 'tychoStorage', 'tychoCapi', 'capiSearch', '$http', '$timeout', 
function tychoController(
$scope, $filter, tychoStorage, tychoCapi, capiSearch, $http, $timeout) 
{ 

var searches = $scope.searches = tychoStorage.getSearches(); 
$scope.capi = new tychoCapi(); 
//..... 

$scope.$watch('searches', function (newValue, oldValue) { 
    $scope.searchCount = searches.length; 
    $scope.starredCount = $filter('filter')(searches, { starred: true }).length; 
    $scope.completedCount = searches.length - $scope.starredCount; 

    if (newValue !== oldValue) { // This prevents unneeded calls to the local storage 
     tychoStorage.putSearches(searches); 
    } 
}, true); 

$scope.runSearch = function (search) { 
    capiSearch.getResults(search).then(function (data) { 
     // fix for $$digest busy 
     $timeout(function() { 
      var i = $scope.searches.indexOf(search); 
      if (i > -1 && data.Results && data.Results.length) { 
       var arr = $scope.searches[i].results || []; 
       $scope.searches[i].results = arr.concat(data.Results); 
       console.log('appending to', $scope.searches[i]) 
      } 
     }); 
    }); 
};

該應用程序需要在控制器中更新$ scope.searches [n] .results = ....並且也有視圖（視圖的嵌套重複）更新。我覺得範圍是錯誤的。

來源

2014-09-02 celeryandsprite

是'＃Inner'您的''front-section.html''視圖嗎？你有獨立的控制器嗎？你可以發佈更多的文檔結構，包括帶有'ng-app'和'ng-controller'的標籤嗎？如果您使用的是同一個控制器，您可能在父級和子級範圍上設置了'$ scope.searches'，因此當您使用'runSearch'更新wone時，它不會更新其他控制器。 – 2014-09-02 19:39:23

更新的源代碼包含更多。（並使命名更清晰）控制器不應該有範圍問題，因爲函數引用$ scope。 – celeryandsprite 2014-09-02 21:04:28

你在外面有一個範圍和控制器（什麼類型？），你的視圖有一個單獨的範圍，並且使用路由中指定的'tychoController'，而'ng-include'中的'grid.html'將會有儘管它看起來沒有自己的控制器，但也是一個單獨的範圍。使用angularjs-batarang chrome擴展來幫助調試它們。如果您正在重新使用tychoController，它將爲每個範圍中的「搜索」設置不同的值，並更改一個不會影響另一個範圍。 – 2014-09-02 23:06:31

嘗試上面的代碼中subview：

<ng-repeat="item in search.results as search in searches"> 
    <li>{{item.searchId}}</li> 
    <!--<ng-include src="'search-grid-item.html'"></ng-include>--> 
</ng-repeat>

來源

2014-09-02 19:26:01

我需要模型更改，'$ scope.searches [n] .results'數組來更新視圖。更改佈局不起作用。 – celeryandsprite 2014-09-02 19:43:36

然後我想你可以試試$ scope.search循環來獲得結果，然後將結果推送到數組中。 – 2014-09-02 19:56:12

嘗試此循環風格沒有運氣，但UI需要更多的靈活性和圍繞內部循環的樣式。 – celeryandsprite 2014-09-03 04:11:12

感謝Alexand用於指出一個標籤問題。將代碼從<ng-repeat...更改爲<div ng-repeat="item in search.results...，允許$ scope更新從控制器運行。迷死人。

來源

2014-09-03 20:33:48 celeryandsprite

AngularUI視圖在模型更改後不更新

回答

相關問題