AngularJS share data bettween директивы родительской и дочерней областей

Question

У меня есть виджет, подобный директиве waComments, он загружает компоненты через службу RESTful и отображает их. На мой взгляд, я использую ng-repeat для их перебора и рендеринга с помощью кнопки, которая при нажатии Отображает новый ответ на форму. Это его обработала директива waCommentsReply. Один виджет waComments имеет множество дочерних директив типа waCommentsReply. Когда форма заполнена и отправлена, я хочу добавить новый комментарий в список моих комментариев. Поэтому обе директивы должны делиться данными комментариев.

Я попытался реализовать это здесь Sharing data between directives, но без особого успеха данные комментария не обновляются, когда я добавляю новый комментарий. Я вижу, что API RESTful вызывает работу, и данные возвращаются, поэтому это не проблема.

Почему моя реализация Sharing data between directives не работает в моем случае?

waCommentsReply директива:

waFrontend.directive('waCommentsReply', ['$rootScope', 'Comment', 'WaFormValidation', 'WaCommentStore', function($rootScope, Comment, WaFormValidation, WaCommentStore) { 
    return { 
     restrict: 'E', 
     templateUrl: '/stubs/comment-form.html', 
     transclude: true, 
     scope: { 
      replyTo: '@replyTo', 
      replyFormList: '=replyFormList', 
      loggedIn: '@loggedIn', 
      model: '@model', 
      id: '@id', 
      cancelButton: '@cancelButton' 
     }, 
     controller: function($scope) { 
      $scope.comments = WaCommentStore; 
      if ($scope.cancelButton == undefined) { 
       $scope.cancelButton = true; 
      } else { 
       $scope.cancelButton = false; 
      } 

      $scope.comment = $scope.commentForm = { 
       Comment: { 
        author_name: '', 
        body: '', 
        model: $scope.model, 
        foreign_key: $scope.id, 
        parent_id: $scope.replyTo 
       } 
      }; 

      $scope.$watch('replyFormList', function (newValue, oldValue) { 
       if (newValue) { 
        $scope.replyFormList = newValue; 
       } 
      }); 

      if ($scope.loggedIn == undefined) { 
       $scope.loggedIn = false; 
      } 

      /** 
      * Handles the submission and response of a reply 
      * 
      * @return void 
      */ 
      $scope.reply = function() { 
       Comment.add($scope.comment).then(function(result) { 
        if (result.status == 'fail' || result.validation != undefined) { 
         $scope.validationErrors = result.validation; 
         WaFormValidation.validate(result.validation, $scope.commentForm); 
        } else if (result.status == 'success') { 
         //$scope.$parent.comments.unshift(result.data.comment); 
         //$scope.comments.unshift(result.data.comment); 
         $scope.comments.comments.unshift(result.data.comment); 
         //WaCommentStore.append($scope.model, $scope.id, result.data.comment); 
         $scope.comments, $scope.id, result.data.comment 
         $scope.comment = {}; 
         $scope.replyFormList[$scope.replyTo] = false; 
        } 
       }); 
      }; 

      $scope.close = function() { 
       $scope.comment = {}; 
       if ($scope.replyFormList[$scope.replyTo] != undefined) { 
        $scope.replyFormList[$scope.replyTo] = false; 
       } 
      } 
     } 
    }; 
}]); 

WaCommentStore директива:

waFrontend.factory('WaCommentStore', function() { 
    return { 
     comments: [] 
    }; 
}); 

waComments директива:

waFrontend.directive('waComments', ['$rootScope', 'Comment', 'WaCommentStore', function($rootScope, Comment, WaCommentStore) { 
    return { 
     restrict: 'E', 
     templateUrl: '/stubs/comments.html', 
     scope: { 
      model: '@commentModel', 
      id: '@commentFk' 
     }, 
     controller: function($scope) { 
      $scope.comments = WaCommentStore; 
      $scope.loaded = false; 
      $scope.loadedMore = true; 
      $scope.currentPage = 1; 
      $scope.loggedIn = false; 
      $scope.paging = {}; 
      $scope.replyFormList = {}; 

      Comment.comments($scope.model, $scope.id).then(function(result) { 
       $scope.comments.comments.push.apply($scope.comments.comments, result.data.comments); 
       $scope.loggedIn = result.data.loggedIn; 
       $scope.paging = result.paging.Comment; 
       $scope.loaded = true; 
      }); 

      $scope.loadMore = function() { 
       $scope.loadedMore = false; 
       if ($scope.paging.nextPage == false) { 
        //return false; 
       } 
       var options = { 
        page: $scope.paging.page + 1 
       }; 
       Comment.comments($scope.model, $scope.id, options).then(function(result) { 

        $scope.comments.comments.push.apply($scope.comments.comments, result.data.comments); 
             $scope.paging = result.paging.Comment; 
        $scope.loadedMore = true; 
       }); 
      }; 

      $scope.submitComment = function() { 
       //alert($scope.author_name + $scope.body); 
      }; 

      $scope.reply = function(replyId) { 
       $scope.replyFormList[replyId] = true; 
      } 
     } 
    }; 
}]); 

Answer 1

, так как в директиве вы определили сферы: {} в основном это означает, что вы определили те директивы для использования изолированного объема. с изолированной областью действия, scope/директива не может видеть, что находится в родительской области. Каким-либо родительским охватом может быть изменена область видимости дочернего объекта с помощью определения двухсторонней привязки.

https://docs.angularjs.org/guide/scope

Answer 2

попробуйте изменить общие данные, как этот

waFrontend.factory('WaCommentStore', function() { 
    var comments = []; 

    var getComments = function() { return comments; } 

    var setComments = function(data) { comments = data; } 

    return { 
     getComments : getComments , 
     setComments : setComments 
    }; 
}); 

Я хотел поставить его в качестве комментариев, но было бы трудно понять, для вас.

Пожалуйста, дайте мне знать, если это сработает, иначе я удалю этот ответ.