Javascript Angularjs更新指令视图-错误：ngRepeat:重复_Javascript_Angularjs

Javascript Angularjs更新指令视图-错误：ngRepeat:重复

javascript angularjs

Javascript Angularjs更新指令视图-错误：ngRepeat:重复,javascript,angularjs,Javascript,Angularjs,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> <ol class="breadcrumb" > &l

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>

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

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

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;

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');
        });

    }
}

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.11/ngRepeat/dupes?p0=n%20in%20folderNav&p1=string%3Agg&p2=gg

controller.js：

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

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

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

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;

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');
        });

    }
}

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.11/ngRepeat/dupes?p0=n%20in%20folderNav&p1=string%3Agg&p2=gg

指令.js：

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

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

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

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;

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');
        });

    }
}

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.11/ngRepeat/dupes?p0=n%20in%20folderNav&p1=string%3Agg&p2=gg

我想向

nav.html

添加一些数据并更新视图。但当我第二次点击按钮时，它显示了一些错误

我已经像大多数人一样将

$scope.$apply（）

添加到了控制器中，但效果不好

错误：

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

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

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

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;

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');
        });

    }
}

Error: [ngRepeat:dupes] http://errors.angularjs.org/1.5.11/ngRepeat/dupes?p0=n%20in%20folderNav&p1=string%3Agg&p2=gg

此错误是由

ng repeat

的中继器中的

重复键造成的。参考
您可以添加按$index跟踪
以避免此错误，或在推送到中继器之前检查重复项。
此错误是由ng repeat
的中继器中的重复键造成的。参考
您可以添加按$index跟踪
，以避免此错误，或在推送到中继器之前检查重复项。
您正在数组中添加重复值，并在该数组上使用ng repeat
进行迭代
错误文本解释了这一切（在链接上）
中继器中不允许重复。使用“跟踪方式”表达式
指定唯一键。中继器：在folderNav中为n，重复键：
字符串：gg，重复值：gg
正如在上单击
一样，您正在将'gg'
添加到数组中，因此同一元素可能有多个条目
如果这是有意的，并且您希望有多个条目并使ng repeat
工作，则必须明确提到唯一键，即ng repeat

您可以将唯一密钥指定为
<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>



{{n}}


在上面的代码中，$index
对于数组中的每个元素都是唯一的，它是数组中元素的索引号。
您正在数组中添加重复值，并在该值上使用ng repeat
进行迭代
错误文本解释了这一切（在链接上）
中继器中不允许重复。使用“跟踪方式”表达式
指定唯一键。中继器：在folderNav中为n，重复键：
字符串：gg，重复值：gg
正如在上单击
一样，您正在将'gg'
添加到数组中，因此同一元素可能有多个条目
如果这是有意的，并且您希望有多个条目并使ng repeat
工作，则必须明确提到唯一键，即ng repeat

您可以将唯一密钥指定为
<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>



{{n}}


在上面的代码中，$index
对于数组中的每个元素都是唯一的，它是数组中元素的索引号。
还有一个问题，如果我不使用$apply来捕获指令中的更改，我该怎么办？在这种情况下，大多数人会做什么？@hiroxi我想你是在试图在控制器和指令之间共享数据。对于共享服务，您可以参考此plunker并记住，广播
是实现此目的的最后一个选项。还有一个问题，如果我不使用$apply捕获指令中的更改，我该怎么办？在这种情况下，大多数人会做什么？@hiroxi我想你是在试图在控制器和指令之间共享数据。对于共享服务，您可以参考此plunker，并记住，广播
是实现此目的的最后一个选项。有关错误的信息，请参阅，有关错误的信息，请参阅