Angularjs更新指令視圖 - 錯誤：ngRepeat：愚弄

的index.html：Angularjs更新指令視圖 - 錯誤：ngRepeat：愚弄

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

    } 
}

我想添加一些數據nav.html和更新視圖。但是當我第二次點擊按鈕時，它會顯示一些錯誤。

我已經像大多數人一樣將$scope.$apply()添加到控制器中，但效果不佳！

錯誤：

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

來源

2017-04-19 hiroxi

有關錯誤的信息，請參閱[AngularJS錯誤參考 - ngRepeat：dupes]（http://errors.angularjs.org/1.5.11/ngRepeat/dupes?p0=n%20in%20folderNav&p1=string%3Agg&p2= gg） – georgeawg

此錯誤是由的ng-repeatDuplicate key in Repeater引起的。請參閱here。

您可以添加track by $index以避免此錯誤或在推送到中繼器之前檢查重複項。

來源

2017-04-19 03:29:23 Pengyy

還有一個問題，如果我不使用$ apply來捕獲指令中的更改，我該怎麼辦？大多數人在這種情況下做什麼？ – hiroxi

@hiroxi我認爲你正試圖在控制器和指令之間共享數據。對於共享服務，你可以參考這個調試器，並記住'broadcast'是實現這個目標的最後一個選擇.http：// plnkr。CO /編輯/ 3xVseS8wN8Y5yJ9b2KZl？P =預覽 – Pengyy

您正在數組中添加重複值，您在其中迭代ng-repeat。

錯誤文本解釋這一切（鏈接），

Duplicates in a repeater are not allowed. Use 'track by' expression to specify unique keys. Repeater: n in folderNav, Duplicate key: string:gg, Duplicate value: gg

上click要添加'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>

在上面的代碼中，$index爲在陣列中的每個元件唯一的，所以元件的陣列中的索引號。

來源

2017-04-19 03:33:22

Angularjs更新指令視圖 - 錯誤：ngRepeat：愚弄

回答

相關問題