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

        }]
    }
}]);

      

+3


source to share


1 answer


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 ...

+1


source







All Articles