【发布时间】：2015-09-29 20:10:57
【问题描述】：
我很抱歉弄得一团糟，但这是第一次使用 stackoverflow ;)
链接到 jsfiddle http://jsfiddle.net/1u1oujmu/19/
指令和刷新 ng-repeat 之间的通信有问题。 我有两个页面 homePage 和dashboardPage - 在这些页面上，当我刷新页面 (dashboardPage) 时，我有指示一切正常，但是当我打开 homePage 并返回 dahsboardPage 时，我的问题就开始了。
步骤重现：
- dashboardPage - 重新加载 - 添加新链接 - list-link 指令 刷新新链接在列表中
- 转到主页
- 返回仪表板页面
- 尝试添加新链接 - 添加链接时（在服务器上并收到响应）我调用工厂来存储数据：
dataFactory.editData("userLinksList", result.data);
//part of factory to edit and propagation data
editData: function(name, data){
dataArray[name] = data;
$rootScope.$broadcast(name);
},
然后在指令控制器中，我有条件监听传播“userLinksList”checkRootScope这是只有一个注册监听器的标志
问题出在：
$scope.data.links = dataFactory.getData("userLinksList");
在 $scope.data.links 我收到了新数据，但 我不知道为什么 ng-repeat 没有刷新
当我返回主页并返回仪表板时，新链接将在列表中
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
-
homePage - 在页面上我有 list-link 指令：
<div class="columns marketing-grid"> <div class="col-md-6"> <list-link hp="true"></list-link> </div> </div> - dashboardPage - 在页面上我有同样的指令，没有参数：
<div class="row">
<div class="col-sm-12 col-md-8">
<list-link></list-link>
</div>
</div>
列表链接模板：
<ul ng-if="data.links">
<li ng-repeat="link in data.links | filter: search" class="link-list-item" data-id="{{link.id}}">
<div class="row">
<div class="col-md-9">
<a ng-href="link.url"><h3>{{link.title}} <span>{{link.host}}</span></h3></a>
</div>
<div class="col-md-3 link-list-time text-right">
{{link.date | date : 'd/MM/yyyy' }}
</div>
<div class="col-md-12">
<blockquote ng-show="link.comment">{{link.comment}}</blockquote>
</div>
<div class="col-md-2">
<span class="link-list-counter all" title="Number of links">{{link.counterAll}}</span>
</div>
<div class="col-md-6 link-list-tags">
<span>tags:</span>
<ul ng-if="link.tags">
<li ng-repeat="item in link.tags"><a href="#" ng-click="">#{{item}}</a></li>
</ul>
</div>
<div class="col-md-4 text-right link-list-buttons">
<button class="btn btn-default btn-xs" title="Edit" ng-click="edit(link.id);">Edit <span class="glyphicon glyphicon-edit" aria-hidden="true"></span></button>
<button class="btn btn-default btn-xs" title="Delete" ng-click="delete(link.id);">Delete <span class="glyphicon glyphicon-remove" aria-hidden="true"></span></button>
</div>
</div>
</li>
</ul>
指令列表链接：
app.directive("listLink", ['path', function(path){
var path = path.url(),
checkRootScope = true;
return {
restrict : "E",
scope : {
hp : "="
},
templateUrl: path.template.listlink,
replace : true,
transclude : false,
controller : ['$rootScope', '$scope','conn', 'auth', 'loaderService','stringOperation','dataFactory', function($rootScope, $scope, conn, auth, loaderService, stringOperation,dataFactory){
var dataConenction = function(){
conn.getData(path.server.link, { params : $scope.data })
.then(function(result){
if($scope.data.all == true){
dataFactory.addData("popularLinksList",result.data);
$scope.data.links = dataFactory.getData("popularLinksList");
} else{
dataFactory.addData("userLinksList",result.data);
$scope.data.links = dataFactory.getData("userLinksList");
}
}, function(msg){
console.log(msg);
});
};
$scope.hp = (typeof $scope.hp === "undefined" ? false : $scope.hp);
$scope.path = path;
$scope.userInfo = auth.getUserInfo();
$scope.data = {
auth : $scope.userInfo,
check : false,
all : $scope.hp
};
dataConenction();
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
$scope.edit = function(id){
$rootScope.$broadcast("editLink", {"id": id});
};
$scope.delete = function(id){
var check = confirm("Are you sure you want to remove?");
if (check == true) {
conn.deleteData(path.server.link, {"params" : {auth : $scope.userInfo, id : id}})
.then(function(result){
dataFactory.editData("userLinksList",result.data.links);
$scope.data.links = dataFactory.getData("userLinksList");
dataFactory.editData("userTagsList",result.data.tags);
}, function(msg){
console.log(msg);
});
}
};
}]
}
}]);
【问题讨论】：
-
我在 jsfiddle 中添加了简单的解决方案 http://jsfiddle.net/1u1oujmu/19/
-
那么，你的问题解决了吗？
-
我认为应该有“简单的问题示例”而不是解决方案。
标签： javascript angularjs angularjs-directive angularjs-ng-repeat