NG-repeat nie aktualizowane na modyfikacji tablicy

Question

Kiedy próbuje zaktualizować tablicę na ng kliknij w celu aktualizacji dyrektywy pozycje Moje NG-powtórzyć za:

<li ng-repeat="itemL1 in mainMenuL1Arr" 
    ng-click="selectL2menu(itemL1.name)"> 
    <i ng-class="getClass(itemL1.icon)"></i> 
</li> 

selectL2menu() zdefiniowane na sterownik jak:

$scope.selectL2menu = function selectL2menu(itemL1name){ 
     $scope.$apply(function() { 
      $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name]; 
     }); 
} 

Zaraz po kliknięciu na menu 1. poziom powinien ujawnić blok menu 2 poziomie z elementami korespondencyjnych (poprzez aktualizację tablicę z wartościami korespondentów, patrz poniżej). Oto blok menu 2 poziom muszę zaktualizować na kliknięcia:

<li ng-repeat="itemL2 in mainMenuL2CurArr" 
    class="subMenuElemBlock" 
    ng-class="{active: itemL2.selected}"> 
     <a href="#"> 
      <i ng-class="getClass(itemL2.icon)"></i> 
      <span>{{itemL2.name}}</span> 
     </a> 
</li> 

Podczas kliknij zdarzenie wywołane - mój tablica pomyślnie zaktualizowane. Niemniej jednak dyrektywa ng-repeat nie zaktualizowała mojego 2. poziomu menu (bazując na aktualizacji tablicy). Próbowałem z (i bez) za pomocą funkcji $ apply - ten sam wynik (chociaż użycie $ apply komunikat o błędzie pojawia się Błąd: $ apply already in progress).

Dlaczego więc moja tablica została pomyślnie zaktualizowana w przypadku kliknięcia, które nie zostało ujawnione w elemencie menu polecenia ng-repeat?

Czytałem podobne posty (link, link, link), ale nie znalazłem żadnej decyzji roboczej.

Answer 1

Nie widząc więcej kodzie kontrolera, trudno jest określić, co może być problem. Oto uproszczony working fiddle. Proponuję porównać to do tego, co masz.

Pamiętaj, że nie musisz dzwonić pod numer $scope.$apply(), ponieważ dyrektywa ng-click zrobi to automatycznie.

HTML:

<ul> 
    <li ng-repeat="itemL1 in mainMenuL1Arr" ng-click="selectL2menu(itemL1.name)"> 
     {{itemL1.name}}</li> 
</ul> 
<ul style="margin-left: 20px"> 
    <li ng-repeat="itemL2 in mainMenuL2CurArr"><a href="#"> 
     <span>{{itemL2.name}}</span> 
    </a> 
    </li> 
</ul> 

JavaScript.

function MyCtrl($scope) { 
    $scope.mainMenuL1Arr = [ {name: 'one'}, {name: 'two'} ]; 
    $scope.mainMenuL2Obj = { 
     one: [ {name: '1.1'}, {name: '1.2'} ], 
     two: [ {name: '2.1'}, {name: '2.2'} ] }; 
    $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj['one']; 
    $scope.selectL2menu = function (itemL1name) { 
     console.log(itemL1name); 
     $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name]; 
    }; 
} 

Answer 2

Czy próbowałeś zmiany funkcji selectL2Menu do:

$scope.selectL2menu = function (itemL1name){ 
    $scope.mainMenuL2CurArr = $scope.mainMenuL2Obj[itemL1name]; 
} 

Answer 3

można spróbować zrobić zakresu $ $ apply() po dodaniu elementu w tablicy jak

$scope.array.push({id: 1, name: 'test'}); 
$scope.$apply(); 

Works dobrze dla mnie, prawdopodobnie masz inną funkcję wtyczki lub czegoś podobnego, która blokuje zakres, w moim przypadku mam select2 i po wybraniu w polu aplikacja nie jest uruchamiana