angularjs direttiva: $ rootScope: errore infdig

Question

Sto cercando di costruire una direttiva impaginazione con angularjs 1.2.15:

Questa è la mia opinione:

<input type="text" ng-model="filter.user"> 
<input type="number" ng-model="filter.limit" ng-init="filter.limit=5"> 
<ul> 
    <li ng-repeat="user in (filteredUsers = (users | orderBy:order:reverse | filter:filter.user) | limitTo: filter.limit)" ng-click="showDetails(user)"> 
    {{user.id}}/{{user.firstname}} {{user.lastname}} 
    </li> 
</ul> 
<div pagination data='filteredUsers' limit='filter.limit'></div> 

ed ecco la mia direttiva impaginazione:

app.directive('pagination', function(){ 
    return { 
    restrict: 'A', 
    templateUrl: 'partials/pagination.html', 
    scope: { 
     data: '=data', 
     limit: '=limit' 
    } 
    } 
}) 

Tutto funziona perfettamente senza la direttiva di impaginazione. Tuttavia con la mia nuova direttiva non appena carico la pagina ottengo un errore che non capisco dato che la direttiva non sta facendo nulla per manipolare i dati che potrebbero finire in un ciclo infinito.
Qual è il problema qui e come posso risolverlo? Grazie!

Aggiornamento:
Ecco il controller e la risorsa.
Controller:

usersModule.controller('usersController', 
    function ($scope, Users) { 
    function init(){ 
     $scope.users = Users.get(); 
    } 
    init(); 
}) 

Resource (ottiene utenti come una matrice da un API REST):

app.factory('Users', function($resource) { 
    return $resource('http://myrestapi.tld/users', null,{ 
     'get': { method:'GET', isArray: true, cache: true } 
    }); 
}); 

Update 2

Ecco una demo: http://plnkr.co/edit/9GCE3Kzf21a7l10GFPmy?p=preview
basta digitare una lettera (es. "f") nell'input sinistro.

Answer 1

Il problema non è all'interno della direttiva, è all'interno del $ watch che la direttiva crea. Quando si invia filteredUsers alla direttiva, la direttiva crea la seguente riga:

$scope.$watch("filteredUsers", function() { 
    // Directive Code... 
}); 

Avviso nel seguente esempio di come riproduciamo senza una direttiva: http://plnkr.co/edit/uRj19PyXkvnLNyh5iY0j

La ragione per cui accade è perché tu sei cambiando gli utenti filtrati ogni volta che viene eseguito un digest (poiché l'assegnazione viene assegnata all'istruzione ng-repeat).

Per correggere questo si potrebbe considerare di guardare e filtrando l'array nel controller con il parametro in più 'vera' per il $ orologio:

$scope.$watch("users | orderBy:order:reverse | filter:filter.user", function(newVal) { 
    $scope.filteredUsers = newVal; 
}, true); 

È possibile controllare la soluzione qui: http://plnkr.co/edit/stxqBtzLsGEXmsrv3Gp6

il $ watch senza il parametro extra (true) farà un semplice confronto con l'oggetto, e dal momento che si crea un nuovo array in ogni ciclo di digest, l'oggetto sarà sempre diverso. Quando si passa il parametro true alla funzione $ watch, significa che eseguirà effettivamente un confronto approfondito con l'oggetto restituito prima di eseguire nuovamente $ watch, quindi anche se si hanno istanze diverse di array che hanno gli stessi dati li considererà uguali.

Answer 2

Una soluzione rapida consiste nell'aggiungere un "manuale" $watchCollection nella direttiva, anziché in un collegamento a 2 vie.

app.directive('pagination', function($parse){ 
    return { 
    restrict: 'A', 
    template: '', 
    scope: { 
     limit: '=limit' 
    }, 
    link: function(scope, elem, attrs) { 
     var dataExpr = $parse(attrs.data); 
     var deregister = scope.$parent.$watchCollection(dataExpr, function(val) { 
     scope.data = val; 
     }); 
     scope.$on('$destroy', deregister); 
    } 
    } 
}) 

$watchCollection monitor i contenuti della matrice, non il riferimento ad esso.

Vedere in esecuzione here.

In generale, non mi piace che espressioni come:

filteredUsers = (users | orderBy:order:reverse | filter:filter.user) 

viste all'interno. Le viste dovrebbero solo rendere le proprietà $scope, non crearne di nuove.

Answer 3

Questo errore può essere rimosso per cancellare la cronologia del browser dalle impostazioni. Ho avuto lo stesso problema e ho applicato molte soluzioni per risolvere questo problema, ma non posso risolvere. Ma quando rimuovo la cronologia del browser e cache questo problema è risolto. Possa questo aiuto per te.