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

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，從另一個控制器，，或使用我在一個控制器要定義不同的方法控制器，我現在使用的$http.success()中的角度事件調度器來觸發我在DisplayCommentsCtrl中觀看的事件。我提供了顯示評論所需的全部信息（data參數$http.success()作爲該事件的參數返回）

上述方法刪除了範圍問題我的兩個控制器有完全不同的範圍，所以我在一箇中定義的方法不能在另一箇中運行，並且在一箇中更改範圍變量的值不會影響另一個。我的現在注入了$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 = ''; 
    }); 
    }; 
}); 

在您需要從SubmitCommentCtrl通過新的註釋數據DisplayCommentsCtrl這種情況下