Question

我试图在成功发布查询后在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未填充。

编辑：

是的，对不起，我完全混淆了范围和这个。查找以下工作代码

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 = {};

       });
    }]);

Answer 1

更正代码段的最简单方法是在{/ p>中将$scope更改为controller

$scope.resultData= (data);

因为您已经在开头宣布了var controller = this。

Answer 2

由于响应是html，你应该在控制器中使用inject $ sce服务，并在$ http服务的success方法中执行以下操作

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

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

请参阅SO Answer

POST成功后，AngularJS HTML不会更新

2 个答案: