javascript - 在 AngularJS 中跨 Controller 更新 $scope 变量

Question

我是 Angular 的新手，所以提前为我预测的一个简单问题道歉。我正在尝试创建一个文章评论系统。我有两个 Angular Controller ，一个用于在加载页面时加载评论，另一个用于向服务器提交新评论。这些工作正常，但在 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();
        });
    };
});

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>

Answer 1

感谢所有评论帮助我的人。我使用事件广播修复了这个问题 - 虽然不完全是我最初设想的解决方案，但它工作得很好。我在下面放了代码来解释。

简而言之...

而之前我尝试从另一个 Controller SubmitCommentCtrl 重新加载一个 Controller DisplayCommentsCtrl，或者使用我在一个 Controller 中定义的方法不同的 Controller ，我现在使用 SubmitCommentCtrl 的 $http.success() 中的 Angular 事件调度程序来触发我在 DisplayCommentsCtrl< 中监视的事件。我提供了显示评论所需的所有信息(作为此事件的参数在 $http.success() 中作为 data 参数返回。

上述方法解决了范围问题。我的两个 Controller 具有完全不同的作用域，因此我在一个 Controller 中定义的方法无法在另一个 Controller 中运行，并且更改一个 Controller 中的作用域变量的值不会影响另一个 Controller 。我的 SubmitCommentCtrl 现在已注入(inject) $rootScope，从中我可以使用方法 $rootScope.$broadcast(strEventName, mixData) 广播到所有子范围。在 DisplayCommentsCtrl 中，我正在使用 $scope.$on(strEventName, function (event, mixData) {//do some }) 监听此方法。

希望这个答案有帮助。有关 Angular 范围的更多信息，请参见此处:https://docs.angularjs.org/guide/scope .

article.js

// 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   =   '';
    });
  };
});