angularjs obserwując wynik wywołania funkcji

Question

Czy istnieje jakiś rzekomy problem z następującym fragmencie:

<ul id="entry-name" class="breadcrumb"> 
     <li ng-repeat="dir in pathElements()" class="active"> 
      <span ng-show="!$last"> 
       &nbsp;<a href="#!?path={{dir.url}}">{{ dir.name }}</a>&nbsp;<span ng-show="!$first" class="dividier">/</span> 
      </span> 
     </li> 
     <li class="active">{{ pathElements()[pathElements().length - 1].name }}</li> 
    </ul> 

z tym JS:

$scope.pathElements = function() { 
     var retval = []; 
     var arr = $scope.currentPath().split('/'); 
     if (arr[0] == '') { 
      arr[0] = '/'; 
     } 

     var url = "/"; 
     retval.push({name: arr[0], url: url}); 
     for (var i = 1; i < arr.length; ++i) { 
      if (arr[i] != '') { 
       url += arr[i] + '/'; 
       retval.push({name: arr[i], url: url}); 
      } 
     } 
     return retval; 
    }; 

Wydaje się to być przyczyną „Błąd: Osiągnięto 10 $ digest() iteracji. błąd, ale nie jestem pewien dlaczego. Czy to dlatego, że pathElements() zwraca za każdym razem nową tablicę? Czy istnieje sposób na obejście tego?

Answer 1

Tak, dzieje się tak, ponieważ za każdym razem zwracasz nową tablicę, a pętla $ digest nieskończenie pętli (ale Angular ją przerywa). Powinieneś zadeklarować go poza funkcją.

$scope.pathArray = []; 
$scope.pathElements = function() { 
    // retval becomes $scope.pathArray 
    if (weNeedToRecalcAllPathVariables) { 
    $scope.pathArray.length = 0; 
    // ... 
    } 

    // ... 
} 

Używamy $scope.pathArray.length = 0 zamiast tworzyć nowe, aby uniknąć ciągłego ostrzału.

Powinieneś także rozważyć sugestie @Flek. Wywołaj tę funkcję tylko raz, w czasie, w którym będzie ona potrzebna do ponownego przeliczenia. A wszystko, co wiążesz, powinno być bezpośrednio nad $scope.pathArray.

Jeśli potrzebujesz funkcji do przetestowania stanu sklejenia przed jej użyciem, to przynajmniej proponuję utworzyć dwie osobne funkcje, aby zachować każdą funkcję z własnym atrybutem.

Answer 2

Dla ciekawych informacji na temat implementacji bułki tartej w Angular sprawdź projekt angular-app (breadcrumbs service, how to use it). To jest wersja demonstracyjna plunker.