AngularJS数据绑定不能与附加到DOM的`<div>`一起工作

这里是我的代码来帮助理解我的问题：

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); } }); }; }]); 

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

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

在我的ejs文件中，我已经设置了一个简单的过程，当我按下buttonfetchData（）被调用，正如我所提到的，创build一个div与所谓的post请求数据，在这种情况下，它不。 它只是打印出{{data}}而不是来自发布请求的数据。

为了进一步的澄清，我发布了一个截图 ，以更直观的方式展示了这个问题。

我find的一个解决scheme是，而不是'<div class="myRanks">{{data}}</div>我把variables放在string之间，就像'<div class="myRanks">' + $scope.data + '</div> ，但是这阻止了我从ejs文件控制variables以及像ng-repeat这样的指令的使用。

Answer 1

你可以在你的html中有以下内容：

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

除非你有data填充，否则div不会显示出来。