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

我试过这个，最初的'loading ...'文字没有出现在屏幕上。我使用超时来设置scopeProperty1，scopeProperty2。超时后显示属性，直到显示空白空间而不是'loading ...'text

Answer 1

第一个ng-bind-tremplate循环上的$digest属性overrides the internal text。

有几种解决方法，ng-cloak，在or文字中巧妙使用template运算符，添加标记并使用ng-show / {{1基于它等等。

使用三元运算符

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

ng-hide

以下是一个具有相同原则的工作示例：http://plnkr.co/edit/Wa38wwxuuE2WWYeEtCOA?p=preview

NG-斗篷

使用<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标记），则会出现问题。在这种情况下，您需要一些聪明的CSS或计算属性来执行此任务。有关IE工作的信息，请参阅documentation。