index.html :

<body ng-app="homeApp" ng-controller="homeCtrl">
   <xi-folder-nav></xi-folder-nav>
   <button class="btn btn-default " type="button" xi-search>Search</button>
</body>

nav.html :

<ol class="breadcrumb" >
<li ng-repeat="n in folderNav" ng-class="{'active' : $last}">
    <a href="#" ng-hide="$last">{{ n }}</a>
    <span ng-show="$last">{{ n }}</span>
</li>
</ol>

service.js :

angular
    .module('homeApp')
    .service('dataService', dataService);

dataService.$inject = ['$rootScope'];
function dataService($rootScope) {
    var service = {
        folderNav: ['root'],

        addFolderNav: function(nav){
            service.folderNav.push( nav );
            $rootScope.$broadcast( 'folderNav.update' );
        },
    };

    return service;
}

controller.js :

angular
    .module('homeApp')
    .controller('homeCtrl',homeCtrl);

homeCtrl.$inject = ['$scope','dataService'];
function homeCtrl($scope,dataService) {
    $scope.$on( 'folderNav.update', function( event ) {
        $scope.folderNav = dataService.folderNav;
        $scope.$apply();
    });
    $scope.folderNav = dataService.folderNav;

directive.js :

angular
    .module('homeApp')
    .directive('xiFolderNav', xiFolderNav);
    .directive('xiSearch', xiSearch);

xiFolderNav.$inject = ['dataService'];
function xiFolderNav(dataService) {
    return{
        restrict: 'E',
        templateUrl: 'js/app/home/nav.html',
    };
}

xiSearch.$inject = ['dataService'];
function xiSearch(dataService) {
    return{
        restrict: 'A',
        link: link
    };

    function link(scope, element, attr) {
        element.bind('click', function(){
            dataService.addFolderNav('gg');
        });

    }
}

Quiero agregar algunos datos a nav.html y actualizar la vista. Pero cuando hago clic en el botón la segunda vez, muestra algunos errores.

Ya agregué el $scope.$apply() al controlador como lo hace la mayoría de la gente, ¡pero no funciona bien!

Error :

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.11/ngRepeat/dupes?p0=n%20in%20folderNav&p1=string%3Agg&p2=gg
1
hiroxi 19 abr. 2017 a las 06:20

2 respuestas

La mejor respuesta

Este error es causado por Duplicate key in Repeater de ng-repeat. Consulte aquí.

Puede agregar track by $index para evitar este error o verificar si hay duplicados antes de pasar al repetidor.

0
Pengyy 19 abr. 2017 a las 03:29

Está agregando un valor duplicado en la matriz, sobre el cual está iterando con ng-repeat.

El texto del error lo explica todo (en el enlace),

No se permiten duplicados en un repetidor. Use la expresión 'seguimiento por' para especificar claves únicas. Repetidor: n en la carpetaNav, clave duplicada: cadena: gg, valor duplicado: gg

Como en click está agregando 'gg' a la matriz, por lo que existe la posibilidad de múltiples entradas del mismo elemento.

Si eso es intencional y desea tener múltiples entradas y hacer que ng-repeat funcione, debe mencionar explícitamente la clave única, a ng-repeat.

Puede especificar una clave única como,

<ol class="breadcrumb" >
<li ng-repeat="n in folderNav track by $index" ng-class="{'active' : $last}">
    <a href="#" ng-hide="$last">{{ n }}</a>
    <span ng-show="$last">{{ n }}</span>
</li>
</ol>

En el código anterior, $index es único para cada elemento de la matriz, es el número de índice del elemento en la matriz.

0
Gaurav Gandhi 19 abr. 2017 a las 03:33