Question

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

感谢所有评论帮助我的人。我使用事件广播解决了这个问题 - 虽然不是我最初设想的解决方案，但它的工作效果非常好。我已经将下面的代码解释了。

简而言之......

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

上述方法消除了范围问题。我的两个控制器具有完全不同的范围，因此我在一个中定义的方法无法在另一个中运行，并且在一个中更改范围变量的值不会影响另一个。我的SubmitCommentCtrl现在注入$rootScope，我可以使用方法$rootScope.$broadcast(strEventName, mixedData)向所有子范围广播。在DisplayCommentsCtrl我正在使用$scope.$on(strEventName, function (event, mixedData) { // do something })收听此方法。

希望这个答案有所帮助。有关角度范围的更多信息，请参见此处：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   =   '';
    });
  };
});

在AngularJS

1 个答案: