索引.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>
导航.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>
服务.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;
}
控制器.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;
指令.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
此错误是由引起Duplicate key in Repeater的ng-repeat。请参阅此处。
您可以添加track by $index以避免此错误或在推送到中继器之前检查重复项。
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句