AngularJS: Relationship between directives - ng-repeat not refresh
I apologize for the mess, but this is the first time on stackoverflow;)
Link to jsfiddle http://jsfiddle.net/1u1oujmu/19/
I have a problem with posting between directives and update ng-repeat . I have two pages homePage and dashboardPage - on this page I have a directive when I refresh the page (dashboardPage) everything works, but when I enable homePage and I go back to dahsboardPage my problem starts.
Play step:
- dashboardPage - reload - add new link - link list directive updated new link is in the list
- Go to home page
- return to dashboard page
- try adding a new link - when adding a link (on the server and I get a response) I call the factory to store the data:
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 the directive controller I have a condition to listen for propagation "userLinksList" checkRootScope, this is a flag for only one register receiver
The problem is on the line:
$scope.data.links = dataFactory.getData("userLinksList");
In $ scope.data.links I am getting new data, but I don’t know why ng-repeat is not updating
when i go to home page and back to dashboard the new link will be in the list
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
-
homePage - on a page I have a link-link directive:
<div class="columns marketing-grid"> <div class="col-md-6"> <list-link hp="true"></list-link> </div> </div>
- dashboardPage - on a page I have this same directive without a parameter:
<div class="row">
<div class="col-sm-12 col-md-8">
<list-link></list-link>
</div>
</div>
link-list template :
<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>
List-link directive:
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);
});
}
};
}]
}
}]);
source to share
Not sure if you fixed it already, but I had a crack.
The "why doesn't it work" part first -
Page1 creates a new scope, say scope1.
Page2 creates a new scope, say scope2.
When the Page1 button is clicked, 5 elements are set on data.link, and [scope1.data.link = 5 elements] is launched under the code -
if(checkRootScope){
$rootScope.$on("userLinksList", function () {
$scope.data.links = dataFactory.getData("userLinksList");
});
checkRootScope = false;
}
When page2 is clicked, it sets 7 items to the dataFactory and translates, and $ rootScope.on is executed to update scope2.data.links to 7 items. However, scope2.data.links is still set to 5 items. This is because the first time $ rootScope.on is executed, the "$ scope" variable in the "on" function is scoped to ie scope1 and NOT scope2. So when scope.data.links is 7, then scope.data.links is set to 7 and scope2.data.links is still set to 5.
Basically ng-view creates a new scope, and if the directive is part of each of the views, you will always have different data.link values in each of the views.
Solution: You can fix this in two ways:
Option 1: You would be better off setting the value in scope as soon as the promise is resolved instead of setting it in a factory and getting it in the $ on listener. At least in this case.
http://plnkr.co/edit/IdrsO1OT9zDqdRiaSBho?p=preview
Option 2: If the broadcast is really per se, I think you will have to bind data.link to the root code (which might not be very good).
http://plnkr.co/edit/VptbSKRf7crU3qqNyF3i?p=preview
and there may be other options ...
source to share