[英]AngularJS : Communication between directives - ng-repeat not refresh
I apologize of a mess but this is the first time on stackoverflow ;) 我为一个烂摊子道歉,但这是第一次在stackoverflow;)
Link to jsfiddle http://jsfiddle.net/1u1oujmu/19/ 链接到jsfiddle http://jsfiddle.net/1u1oujmu/19/
I have problem with communication between directives and refresh ng-repeat . 我在指令和刷新ng-repeat之间的通信有问题。 I have two pages homePage and dashboardPage - on these page I have directive when I refresh page (dashboardPage) everything is working, but when I switch on homePage and I will back to dahsboardPage my problem starts occurs. 我有两页homePage和dashboardPage - 在这些页面上我有指令,当我刷新页面(dashboardPage)一切正常,但当我打开homePage,我将回到dahsboardPage我的问题开始发生。
Step reproduce: 步骤重现:
dataFactory.editData("userLinksList", result.data);
//part of factory to edit and propagation data
editData: function(name, data){
dataArray[name] = data;
$rootScope.$broadcast(name);
},
Then in directive controller I have condition to listen propagation "userLinksList" checkRootScope this is flag for only one register listener 然后在指令控制器中我有条件监听传播“userLinksList” checkRootScope这只是一个寄存器监听器的标志
Problem is in line: 问题在于:
$scope.data.links = dataFactory.getData("userLinksList");
In $scope.data.links I receives new data but I don't know why ng-repeat is not refresh 在$ scope.data.links中我收到了新数据,但我不知道为什么ng-repeat没有刷新
when I go to homePage and back to dashboard new link will be on list 当我去homePage并返回仪表板时,新链接将列在清单上
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
homePage - on the page I have list-link directive: homePage - 在页面上我有list-link指令:
<div class="columns marketing-grid"> <div class="col-md-6"> <list-link hp="true"></list-link> </div> </div>
<div class="row">
<div class="col-sm-12 col-md-8">
<list-link></list-link>
</div>
</div>
template of list-link : 列表链接模板 :
<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>
Directive list-link: 指令列表链接:
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);
});
}
};
}]
}
}]);
Not sure if you already fixed it but I had a crack at it. 不确定你是否已经修好了但是我对它有所了解。
First the "why not working" part - 首先是“为什么不工作”的部分 -
Page1 creates a new scope, lets say scope1. Page1创建了一个新的范围,比如说scope1。
Page2 creates a new scope, say scope2. Page2创建了一个新的范围,比如scope2。
When the Page1 is clicked the data.link is set to 5 items and below code is run [scope1.data.link = 5 items] - 单击Page1时,data.link设置为5个项目,下面的代码运行[scope1.data.link = 5 items] -
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
When the Page2 is clicked, it set 7 items to dataFactory and it is broadcasted to and $rootScope.on is executed to update scope2.data.links to 7 items. 单击Page2时,它将7个项目设置为dataFactory并将其广播到,并执行$ rootScope.on以将scope2.data.links更新为7个项目。 However scope2.data.links is still set to 5 items. 但是scope2.data.links仍设置为5个项目。 This is because when $rootScope.on is executed first time the "$scope" variable within the "on" function refers to closure scope ie scope1 and NOT scope2. 这是因为当第一次执行$ rootScope.on时, “on”函数中的“$ scope”变量引用闭包范围,即scope1和NOT scope2。 So essentially when scope.data.links is set to 7 then scope.data.links is set to 7 and scope2.data.links is still set to 5. 因此,当scope.data.links设置为7时,scope.data.links设置为7,scope2.data.links仍然设置为5。
Basically ng-view creates a new scope and if directive is part of each of the views, you would always end up having different data.link value in each of the views. 基本上ng-view创建了一个新的范围,如果指令是每个视图的一部分,你总是会在每个视图中拥有不同的data.link值。
Solution: You can fix it in two ways: 解决方案:您可以通过两种方式修复它:
Option 1: You would be better off setting the value in scope as soon the promise is resolved instead of setting in factory and getting from it in $on listener. 选项1:如果解决了承诺,您最好在范围内设置值,而不是在工厂中设置并在$ on on listener中获取。 Atleast in this case. 至少在这种情况下。
http://plnkr.co/edit/IdrsO1OT9zDqdRiaSBho?p=preview http://plnkr.co/edit/IdrsO1OT9zDqdRiaSBho?p=preview
Option 2: If broadcast is really essentially I think you would have to bind the data.link to rootscope (which might not be a good practice). 选项2:如果广播实际上是我认为你必须将data.link绑定到rootscope(这可能不是一个好习惯)。
http://plnkr.co/edit/VptbSKRf7crU3qqNyF3i?p=preview http://plnkr.co/edit/VptbSKRf7crU3qqNyF3i?p=preview
and may be there are other options... 可能还有其他选择......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.