Angular.js guardare il risultato di una chiamata di funzione

Question

c'è alcun problema apparente con il seguente frammento:

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

con questo 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; 
    }; 

Questa sembra essere la causa di un "errore: 10 $ digest() iterazioni raggiunte. Aborting! " errore, ma non sono sicuro del perché. È perché pathElements() restituisce una nuova matrice ogni volta? C'è un modo per aggirare questo?

Answer 1

Sì, questo accade perché si restituisce un nuovo array ogni volta e il ciclo $ digest si riavvolge all'infinito (ma Angular lo interrompe). Dovresti dichiararlo al di fuori della funzione.

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

    // ... 
} 

Usiamo $scope.pathArray.length = 0 invece di crearne uno nuovo, per evitare che la cottura in modo continuo.

Si consiglia inoltre di prendere in considerazione ciò che @Flek suggerisce. Chiama questa funzione solo una volta, nel momento in cui ne hai bisogno per ricalcolare. E tutto ciò che si lega dovrebbe essere direttamente su $scope.pathArray.

Se è necessaria una funzione per testarne lo stato prima di utilizzarlo, almeno suggerisco di creare due funzioni separate, solo per mantenere ciascuna funzione con la propria attribuzione.

Answer 2

Per alcuni suggerimenti su come implementare i breadcrumb in Angular, consultare il progetto angular-app (breadcrumbs service, how to use it).

Ecco una demo plunker.