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视图在模型更改后不更新

回答

相关问题