ng-bind未显示范围变量{{}}

时间:2016-04-06 18:23:59

标签: angularjs

test.html(我的模板):

<span data-ng-bind="emailSent.info"></span>

JS:

$scope.resetPasswordEmail = "my@email.here";
// info is taken from a database with different languages
$scope.emailSent = { 
    info: getInfoFromDatabase() // returns: 'Confirmation email sent to {{resetPasswordEmail}}, check your email.'
};
angular.element(document.body).append($compile($templateCache.get('test.html'))($scope));

但是,这会在页面的跨度中产生以下结果:

Confirmation email sent to {{resetPasswordEmail}}, check your email. 

我试图做&#34;嵌套&#34;范围变量。我是否必须重新编译已编译的模板。 或是否有适当的角度来实现这一目标。

1 个答案:

答案 0 :(得分:1)

根据您更新的问题,我知道您为什么要这样做。

这样做的关键是使用$interpolate

angular.module('app', []).
controller('Ctrl', function($scope, $interpolate, $compile){
  $scope.resetPasswordEmail = "my@email.here";
  $scope.emailSent = {
    info: $interpolate(getInfoFromDatabase())($scope)
  };
  
  function getInfoFromDatabase(){
    return 'Confirmation email sent to {{resetPasswordEmail}}, check your email.'
  }
  angular.element(document.body).append($compile('<span data-ng-bind="emailSent.info"></span>')($scope));
})
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app" ng-controller="Ctrl"></div>