angularjs - ng-bind 或 ng-bind-template 未显示初始文本

Question

HTML

<span ng-bind-template="{{scopeProperty1}} {{scopeProperty2}}">loading...</span>

JS

setTimeout(function(){
   $scope.$apply(function(){
     $scope.scopeProperty1 = "Mr."
     $scope.scopeProperty2 = "Mark Rajcok"
   })
}, 1000);

我试过了，最初的“正在加载...”文本没有出现在屏幕上。我使用超时来设置scopeProperty1、scopeProperty2。属性在超时后显示，直到那时显示一个空白区域而不是“正在加载...”文本

score 4 · Accepted Answer

该ng-bind-tremplate属性覆盖text第一个$digest循环的内部。

有几种方法可以解决它，在文本中ng-cloak巧妙地使用or运算符template，添加标志并基于它使用ng-show/等。ng-hide

一个使用穷人三元运算符的例子：

<span ng-bind-template="{{scopeProperty1}} {{scopeProperty2}} {{(!scopeProperty1 && !scopeProperty2) && 'Loading ...' || ''}}"></span>

解决方案ng-cloak将需要另一个html元素：

<span ng-bind-template="{{scopeProperty1}} {{scopeProperty2}}">
    <span ng-cloak>Loading ...</span>
</span>

但是，如果您ng-bind-template在不允许其他元素（如option标签）在其中使用的地方使用，这将导致问题。在这种情况下，您将需要一些巧妙的 CSS 或计算属性来完成此任务。请参阅IE 解决方法的文档。

1 回答 1