Question

模型更改后AngularUI更新视图的初学者问题。我有一份食谱清单，每个食谱都有一份清单成分。在$ http GET for ingredients之后，我的嵌套循环没有更新。因为其他ng-repeat帖子没有帮助我想知道这是否是我的AngularUI（UI）代码。

模型更改后如何更新子视图？是否需要范围触发器？

的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 = ....并让视图（视图的嵌套重复）更新。我觉得范围是错误的。

Answer 1

在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>

Answer 2

感谢Alexand指出了代码问题。将代码从<ng-repeat...更改为<div ng-repeat="item in search.results...允许$ scope更新从控制器开始工作。迷死。

模型更改后AngularUI视图不会更新

2 个答案: