POST成功后AngularJS HTML不更新答案

【问题标题】：AngularJS HTML not updating after POST successPOST成功后AngularJS HTML不更新
【发布时间】：2015-06-27 01:47:28
【问题描述】：

我试图在成功发布查询后更新 HTML 中的项目，但我似乎无法让它工作。这是 HTML 方面：

<div class='container' ng-controller='MainController as inputControl' >
    <div class='row well well-sm'>

         <div class='col-md-6'>

            <h2>Input Parameters</h2>

            <form name='addform'  ng-submit='inputControl.mainAddition()'>
                 <label>Number 1:</label>
                 <input ng-model='inputControl.inputData.num1' type="number" />
                     <br>
                 <label>Number 2:</label>
                 <input ng-model='inputControl.inputData.num2' type="number" />
                    <br>
                 <input type='submit' value='Add them!'/>
            </form>

         </div>

        <div class='col-md-6'>
            <h2>Result</h2>
            <P>{{inputControl.resultData}}</P>
        </div>

    </div>
</div>

这是 Angular 的一面：

angular.module('pageLoader')
    .controller('MainController',['$scope', '$http',  function($scope, $http) {
       var controller = this;
       this.inputData = {};
        $scope.resultData = 0;

       this.mainAddition = (function() {
           console.log(this.inputData);
           $http({
               method: 'POST', 
               url: '/functions', 
               data: this.inputData
           })
           .success( function(data, status, headers, config){
               console.log(data);
               $scope.resultData= (data);
           });
           this.inputData = {};

       });
    }]);

控制台日志显示来自服务器的正确响应，但未填充 HTML 中的 resultData。

编辑：

是的，抱歉，我完全把 $scope 和这个搞混了。在下面找到工作代码

angular.module('pageLoader')
    .controller('MainController',['$scope', '$http',  function($scope, $http) {

       this.inputData = {};
       this.resultData = 0;

       this.mainAddition = (function() {
           var cntrlCache = this;
           console.log(this.inputData);
           $http({
               method: 'POST', 
               url: '/functions', 
               data: this.inputData
           })
           .success( function(data, status, headers, config){
               console.log(data);
               cntrlCache.resultData= data;
           });
           this.inputData = {};

       });
    }]);

【问题讨论】：

猜猜你在分配给范围和使用控制器之间完全混淆了。而不是将其设置为范围，而是将数据设置为this.inputData.resultData。但请注意，您必须在回调之前将this 缓存到另一个变量。有关详细信息，请参阅this。
就像@PSL 说的，如果你使用controller as，在你的控制器内部你应该使用this 而不是$scope。
别管我了，想通了。感谢您的帮助！
当你使用控制器作为语法时，你应该从控制器中移除 $scope 依赖。对所有绑定查看的变量使用“this.variable_to_be_shown”，对中间变量使用“var other_variable”。

标签： angularjs

【解决方案1】：

纠正你的 sn-p 最简单的方法是将$scope 更改为controller

$scope.resultData= (data);

因为你已经在一开始就声明了var controller = this。

【讨论】：

【解决方案2】：

由于响应是一个html，你应该在控制器中使用注入$sce服务，并在$http服务的成功方法中执行以下操作

$scope.resultData = $sce.trustAsHtml(data)

在控制器中使用异步方法确实是一种不好的做法。尝试利用角度服务。

请参考SO Answer

【讨论】：