Question

这是我的代码，以帮助理解我的问题：

var app = angular.module('myProfile', []);

app.controller('myWrapperCtrl', ['$scope', '$http', function ($scope, $http) {

$scope.fetchData = function() {
    $http.post('/rankData', { id: $('h2.name').attr('id')}).then(function(response) {
        $scope.data = response.data;

        var newElement = angular.element('<div class="myRanks">{{data}}</div>');
        var target = document.getElementsByTagName('body');

        if ($('.myRanks').length === 0) {
            angular.element(target).append(newElement);
        }
    });




};
}]);

在上面的代码中，我基本上创建了一个div并分配了变量 data ，稍后将填充我从post请求中获取的数据。

<button type="button" id="ranks" ng-click="fetchData()">Ranks</button>

在我的ejs文件中，我设置了一个简单的过程，当我按下一个按钮 fetchData（）被调用时，正如我所提到的，创建了一个div，其中包含来自post请求的数据，在这种情况下它没有。它只打印出{{data}}而不是帖子请求中的数据。

为了进一步澄清，我发布了screenshot，以更直观的方式显示问题。

我发现的一个解决方案是，而不是'<div class="myRanks">{{data}}</div>我将变量放在字符串之间，就像'<div class="myRanks">' + $scope.data + '</div>一样，但是这阻止了我从ejs文件控制变量和使用指令，如 ng-repeat 。

Answer 1

您可以在html中使用以下内容：

<div class="myRanks" ng-hide = "data == null" >{{data}}</div>

在您填充data之前，div不会显示。

AngularJS数据绑定无法与附加到DOM

1 个答案: