AngularJS在父级和子级范围指令之间共享数据

Question

我有一个像指令这样的小部件，叫做waComments，它通过RESTful服务加载组件并显示它们。在我看来，我正在使用 ng-repeat 来循环它们并使用一个按钮呈现它们，如果按下该按钮，将显示对表单的新回复。这是他由waCommentsRepred指令处理的。一个 waComments 小部件有许多 waCommentsReply 类型的子指令。填写并提交表单后，我想在我的评论列表顶部添加新评论。因此，这两个指令都必须共享注释数据。

我试图在这里实现这一点 在指令之间共享数据，但没有取得多大成功，当我添加新评论时，注释数据不会更新。我看到 RESTful API 调用有效并且返回数据，所以这不是问题。

为什么我的指令之间共享数据实现在我的情况下不起作用？

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

因为在这两个指令中都定义了作用域：{}，基本上这意味着你定义了这些指令来使用隔离的作用域。使用独立作用域时，作用域/指令无法查看父作用域中的内容。但是，父作用域可能会受到子作用域更改的影响，这些更改具有 2 路绑定定义。

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

我想把它作为评论，但对你来说很难理解。

如果这有效，请告诉我，否则我将删除此答案。