Question

我在angularjs中有一个post请求，它从我的后端得到一个字符串模式：

var tabledata = "";
$http.post("lib/action.php", {monsters: $scope.getMonsters}).success(function(data) {   
    tabledata = data;   //Assign the pattern

}).error(function(data) { console.log("error"); });

然后在下面的函数调用中使用此模式：

$scope.result = makeTableFrom(tabledata); //Call the function to build the table based on the pattern

我想要完成的是我希望我的指令在post请求完成之后执行，因为现在当我运行我的应用程序时，tabledata只是一个空字符串，因此，我的makeTableFrom函数正在返回一个空的结果。

这是我的指示：

gameApp.directive('mapActivity', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            scope.$watch('tabledata', function() {

             angular.element('.click#1').addClass('dotted').html($("<img src='images/dot.png'>"));          
                var j = null;
                for(var i = 1; i <= 4; i++)
                {
                    $.ajax({
                        type: 'GET',
                        url: 'lib/terrain.php',
                        dataType: 'html',
                        data: {i: i},
                        success: function(data) {
                            var randomRuta = Math.floor((Math.random() * 100) + 1);
                            angular.element('.click#'+randomRuta).addClass('monster').html($("<img src='images/blackdot.png' title='"+data+"'>"));                  
                        },
                        error: function(xhr, ajaxOptions, thrownError) { alert(thrownError); }
                    });
                    j=i;
                }  
                angular.element('.click').click(function() {
                    if(angular.element(this).hasClass('monster'))
                    {
                        if(confirm('Vill du anfalla monster?'))
                        {
                            alert("Du vann");
                            angular.element('.click.monster'+j).empty();
                            angular.element('.click.monster').removeClass('monster'+j);

                            angular.element('.click.dotted').empty();
                            angular.element('.click.dotted').removeClass('dotted');
                            angular.element(this).addClass('dotted');
                            angular.element('.click.dotted').html($('<img src="images/dot.png">'));
                        }
                    }
                    else
                    {
                        angular.element('.click.dotted').empty();
                        angular.element('.click.dotted').removeClass('dotted');

                        if(!angular.element(this).hasClass('dotted'))
                        {
                            angular.element(this).addClass('dotted');
                            angular.element(this).html($('<img src="images/dot.png">'));
                        }
                    }
                });
            });                     
        }
    };
});

Answer 1

这里你要做的是： - 向$scope添加新变量：$scope.resultLoaded = false; - 将后期成功更改为：

success(function(data) {   
 $scope.result = makeTableFrom(data);
 $scope.resultLoaded = true; 
}

- 在您的HTML中，您按如下方式使用它：

<div ng-if='resultLoaded'>
  <table map-activity>...
</div>

在指令之前执行http post请求

1 个答案: