모델 변경 후 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 = ....를 업데이트하고보기 (보기의 중첩 된 반복)도 업데이트하십시오. 나는 범위가 잘못되었다고 느낀다. subview 코드 위

출처

2014-09-02 celeryandsprite

'# 내부 '가''front-section.html' '보기입니까? 별도의 컨트롤러가 있습니까? 당신은'ng-app'와'ng-controller' 태그를 포함하여 더 많은 문서 구조를 게시 할 수 있습니까? 같은 컨트롤러를 사용하고 있다면 부모와 자식 범위 모두에'$ scope.searches'가 설정되어있을 것입니다. 따라서 'runSearch'로 wone을 업데이트하면 다른 곳을 업데이트하지 않습니다. –

더 많은 것을 포함하도록 소스 코드가 업데이트되었습니다. (더 명확하게 명명 됨) 함수는 $ scope를 참조하기 때문에 컨트롤러에 범위 문제가 없어야합니다. – celeryandsprite

바깥쪽에 범위와 컨트롤러 (어떤 유형?)가 있고,보기가 별도의 범위를 가지고 있으며 경로에 지정된대로 'tychoController'를 사용하고'ng-include'의 'grid.html'에 별도의 스코프도 있지만 자체 컨트롤러가없는 것처럼 보입니다. 디버그에 도움이되는 angularjs-batarang 크롬 확장을 사용하십시오. tychoController를 다시 사용하면 각 범위에서 'searches'에 대해 다른 값을 설정하고 하나를 변경하면 다른 범위에 영향을주지 않습니다. –

시도 :

<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

그런 다음 $ scope.search에 루프를 실행하여 결과를 얻은 다음 결과를 배열로 푸시 할 수 있다고 생각합니다. –

UI가 운이 좋지 않지만이 루프 스타일을 사용해 보았지만 UI에는 내부 루프 주위에 더 많은 유연성과 스타일이 필요합니다. – celeryandsprite

감사 태그 문제를 지적 Alexand. <ng-repeat...에서 <div ng-repeat="item in search.results...으로 코드를 변경하면 $ scope 업데이트가 컨트롤러에서 작동합니다. 감사합니다.

출처

2014-09-03 20:33:48 celeryandsprite

모델 변경 후 AngularUI보기가 업데이트되지 않습니다.

답변

관련 문제