AngularJS：指令之间的通信 - ng-repeat不刷新

Question

我为一个烂摊子道歉，但这是第一次在stackoverflow;）

链接到jsfiddle http://jsfiddle.net/1u1oujmu/19/

我在指令和刷新ng-repeat之间的通信有问题。 我有两页homePage和dashboardPage - 在这些页面上我有指令，当我刷新页面（dashboardPage）一切正常，但当我打开homePage，我将回到dahsboardPage我的问题开始发生。

步骤重现：

• dashboardPage - reload - 添加新链接 - 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没有刷新

当我去homePage并返回仪表板时，新链接将列在清单上

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

        }]
    }
}]);

Answer 1

不确定你是否已经修好了但是我对它有所了解。

首先是“为什么不工作”的部分 -
Page1创建了一个新的范围，比如说scope1。
Page2创建了一个新的范围，比如scope2。

单击Page1时，data.link设置为5个项目，下面的代码运行[scope1.data.link = 5 items] -

        if(checkRootScope){
            $rootScope.$on("userLinksList", function () {
                $scope.data.links = dataFactory.getData("userLinksList");
            });
            checkRootScope = false;
        }

单击Page2时，它将7个项目设置为dataFactory并将其广播到，并执行$ rootScope.on以将scope2.data.links更新为7个项目。 但是scope2.data.links仍设置为5个项目。 这是因为当第一次执行$ rootScope.on时， “on”函数中的“$ scope”变量引用闭包范围，即scope1和NOT scope2。 因此，当scope.data.links设置为7时，scope.data.links设置为7，scope2.data.links仍然设置为5。

基本上ng-view创建了一个新的范围，如果指令是每个视图的一部分，你总是会在每个视图中拥有不同的data.link值。

解决方案：您可以通过两种方式修复它：

选项1：如果解决了承诺，您最好在范围内设置值，而不是在工厂中设置并在$ on on listener中获取。 至少在这种情况下。

http://plnkr.co/edit/IdrsO1OT9zDqdRiaSBho?p=preview

选项2：如果广播实际上是我认为你必须将data.link绑定到rootscope（这可能不是一个好习惯）。

http://plnkr.co/edit/VptbSKRf7crU3qqNyF3i?p=preview

可能还有其他选择......