Javascript 在AngularJS中跨控制器更新$scope变量

我是个新手，所以提前为我的预测道歉是个简单的问题。我正在尝试为文章创建一个评论系统。我有两个Angle控制器，一个用于在加载页面时加载注释，另一个用于向服务器提交新注释。这些操作很好，但是在

success（）

方法中，我想更新显示的注释以显示新的注释。然而，我的代码目前不起作用，而且我尝试过的任何方法似乎都无法修复它。能帮我个忙吗

我知道这可能与不同的

$scope

变量有关，但我所阅读的文档似乎都没有明确说明这一点

article.js

// create app
var articleApp = angular.module('articleApp', ['btford.markdown', 'ngSanitize']);
// create controller
articleApp.controller('DisplayCommentsCtrl', function ($scope, $http) {
    $scope.loadComments =   function () {
        $http.get(Routing.generate('article_comments', { id: window.articleId })).success(function (data) {
            $scope.comments = data.comments;
        });
    };
    $scope.loadComments();
});

articleApp.controller('SubmitCommentCtrl', function ($scope, $http, $route) {
    $scope.loadComments = function () {
        $http.get(Routing.generate('article_comments', { id: window.articleId })).success(function (data) {
            $scope.comments = data.comments;
        });
    };
    $scope.loadComments();

    $scope.formData = {
        'comment':{
            'save'      :   'Save',
            'comment'   :   '',
            '_token'    :   $('#comment__token').val()
        }
    };
    $scope.processForm = function ($route) {
        $http({
            method  :   'POST',
            url     :   Routing.generate('article_new_comment', { id: window.articleId }),
            data    :   $.param($scope.formData),
            headers :   {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .success(function (data, $route) {
            $route.reload();
        });
    };
});

// create app
var articleApp                          =   angular.module('articleApp', ['btford.markdown', 'ngSanitize', 'ngAnimate']);

// controller to display comments
articleApp.controller('DisplayCommentsCtrl', function ($scope, $http) {
  // load comments method
  $scope.loadComments                   =   function () {
    $http.get(Routing.generate('article_comments', { id: window.articleId })).success(function (data) {
      $scope.comments                   =   data.comments;
    });
  };
  $scope.loadComments();

  // in case there's a new comment
  $scope.$on('newComment', function (event, newComment) {
    $scope.comments.push(newComment);
  });

});

// controller to submit a new comment
articleApp.controller('SubmitCommentCtrl', function ($scope, $rootScope, $http) {
  $scope.loadComments                   =   function () {
    $http.get(Routing.generate('article_comments', { id: window.articleId })).success(function (data) {
      $scope.comments                   =   data.comments;
    });
  };
  $scope.loadComments();

  $scope.formData                       =   {
    'comment':{
      'save'        :   'Save',
      'comment' :   '',
      '_token'  :   $('#comment__token').val()
    }
  };
  $scope.processForm                    =   function ($route) {
    $http({
      method    :   'POST',
      url       :   Routing.generate('article_new_comment', { id: window.articleId }),
      data  :   $.param($scope.formData),
      headers   :   {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      })
    .success(function (data) {
      // add the new comment below the form
      $rootScope.$broadcast('newComment', data);
      // empty the form
      $scope.formData.comment.comment   =   '';
    });
  };
});

article.html.twig

<div class="col-md-12">     
    <div class="commentFormContainer" ng-controller="SubmitCommentCtrl">
        {% verbatim %}
        <p>{{ formData.comment.comment }} / {{ formData.comment._token }}</p>
        {% endverbatim %}
        <!--{{ form_start(commentForm, { 'attr': { 'id': 'commentForm', 'ng-submit':'processForm()' }}) }} -->
        <form name="comment" id="commentForm" ng-submit="processForm()">
            {{ form_errors(commentForm) }}
            {{ form_row(commentForm.comment, { 'attr': { 'ng-model': 'formData.comment.comment' } }) }}
            {{ form_widget(commentForm._token) }}
            {{ form_end(commentForm) }}
    </div>

    {% verbatim %}
    <div class="articleCommentContainer"  ng-controller="DisplayCommentsCtrl">
        <div ng-repeat="comment in comments | orderBy: '-time'">
            <div class="articleCommentComment" ng-bind-html="comment.commentHTML">              
            </div>
            <div class="articleCommentDetails">
                <p>[{{ comment.creator }} @ {{ comment.time|date:'EEE d MMM, h.mm a' }}]</p>
            </div>
        </div>
    </div>
    {% endverbatim %}
</div>

{%verbatim%}
{{formData.comment.comment}/{{formData.comment._-token}}

{%endverbatim%}
{{form_errors（commentForm）}}
{{form_行（commentForm.comment，{'attr'：{'ng model'：'formData.comment.comment'}}}}}
{{form_小部件（commentForm.\u令牌）}
{{form_end（commentForm）}}
{%verbatim%}
[{{comment.creator}}}{{comment.time |日期：'EEE d MMM，h.mm a'}]

{%endverbatim%}
感谢所有评论帮助我的人。我使用事件广播解决了这个问题——虽然不是我最初设想的解决方案，但效果很好。我把代码放在下面解释

简言之

以前我试图从另一个控制器重新加载一个控制器，
displaycomentsctrl
，或者使用我在另一个控制器的一个控制器中定义的方法，
SubmitCommentCtrl
，现在我在
$http.success（）中使用角度事件调度器
的提交建议Ctrl
来触发我在
DisplayCommentsCtrl
中监视的事件。我提供显示注释所需的所有信息（作为
$http.success（）
中的
data
参数返回，作为此事件的参数）

上面描述的方法解决了作用域问题。我的两个控制器的作用域完全不同，因此我在其中一个控制器中定义的方法无法在另一个控制器中运行，并且更改其中一个作用域变量的值不会影响另一个控制器。我的
submitcommonCtrl
现在被注入
$rootScope
，从这里我可以告诉我们e将方法
$rootScope.$broadcast（strEventName，mixedData）
广播到所有子作用域。在
displaycomentsctrl
中，我正在使用
$scope.$on（strEventName，function（event，mixedData）{//do something}）监听此方法。

希望这个答案有帮助。有关角度范围的更多信息，请参阅此处：

article.js

// create app
var articleApp = angular.module('articleApp', ['btford.markdown', 'ngSanitize']);
// create controller
articleApp.controller('DisplayCommentsCtrl', function ($scope, $http) {
    $scope.loadComments =   function () {
        $http.get(Routing.generate('article_comments', { id: window.articleId })).success(function (data) {
            $scope.comments = data.comments;
        });
    };
    $scope.loadComments();
});

articleApp.controller('SubmitCommentCtrl', function ($scope, $http, $route) {
    $scope.loadComments = function () {
        $http.get(Routing.generate('article_comments', { id: window.articleId })).success(function (data) {
            $scope.comments = data.comments;
        });
    };
    $scope.loadComments();

    $scope.formData = {
        'comment':{
            'save'      :   'Save',
            'comment'   :   '',
            '_token'    :   $('#comment__token').val()
        }
    };
    $scope.processForm = function ($route) {
        $http({
            method  :   'POST',
            url     :   Routing.generate('article_new_comment', { id: window.articleId }),
            data    :   $.param($scope.formData),
            headers :   {
                'Content-Type': 'application/x-www-form-urlencoded'
            }
        })
        .success(function (data, $route) {
            $route.reload();
        });
    };
});

// create app
var articleApp                          =   angular.module('articleApp', ['btford.markdown', 'ngSanitize', 'ngAnimate']);

// controller to display comments
articleApp.controller('DisplayCommentsCtrl', function ($scope, $http) {
  // load comments method
  $scope.loadComments                   =   function () {
    $http.get(Routing.generate('article_comments', { id: window.articleId })).success(function (data) {
      $scope.comments                   =   data.comments;
    });
  };
  $scope.loadComments();

  // in case there's a new comment
  $scope.$on('newComment', function (event, newComment) {
    $scope.comments.push(newComment);
  });

});

// controller to submit a new comment
articleApp.controller('SubmitCommentCtrl', function ($scope, $rootScope, $http) {
  $scope.loadComments                   =   function () {
    $http.get(Routing.generate('article_comments', { id: window.articleId })).success(function (data) {
      $scope.comments                   =   data.comments;
    });
  };
  $scope.loadComments();

  $scope.formData                       =   {
    'comment':{
      'save'        :   'Save',
      'comment' :   '',
      '_token'  :   $('#comment__token').val()
    }
  };
  $scope.processForm                    =   function ($route) {
    $http({
      method    :   'POST',
      url       :   Routing.generate('article_new_comment', { id: window.articleId }),
      data  :   $.param($scope.formData),
      headers   :   {
        'Content-Type': 'application/x-www-form-urlencoded'
      }
      })
    .success(function (data) {
      // add the new comment below the form
      $rootScope.$broadcast('newComment', data);
      // empty the form
      $scope.formData.comment.comment   =   '';
    });
  };
});

在这种情况下，您需要将新的注释数据从SubmitCommentCtrl传递到DisplayCommentsCtrl，您可以使用角度广播事件来实现这一点；或者从提交控制器使用广播或发射，从显示控制器使用发射感谢所有帮助！我已经添加了一个答案，描述了我是如何获得下面的解决方案的。Dom:-）