使用ng-show / hide时使用{{}}与否之间的区别是什么

时间:2016-01-12 03:03:50

标签: angularjs ng-show

当我尝试进行自动显示/隐藏时,我发现如果我在属性值表达式中使用{{}},则DOM初始状态是正确的,但是当我更新模型时,视图尚未更新,即使属性的值已正确更新为“false”,“ng-hide”类仍未添加到DOM中。不正确的DOM看起来像这样:

    <p class="grey-text" ng-show="false">no data</p>

但如果我不使用{{}},该类可以正确更新。

1 个答案:

答案 0 :(得分:2)

ng-show指令(以及大多数指令,包括自定义指令)接受表达式作为参数。

{{ }}运算符为Interpolation Markup。计算插值运算符中的表达式 ,并输出文本。无法保证在指令评估数据之前完成此插值。

  

•无法保证它适用于每个指令,因为插值本身就是一个指令。如果另一个指令在插值运行之前访问属性数据,它将获得原始插值标记而不是数据。

它也是多余的,因为该指令已经设计为在评估结果之前采用表达式并对其执行插值。如果在指令之前发生插值,结果将类似于:

  1. 插值{{myVar}}并返回结果。
  2. 将结果'false'写入DOM。
  3. 指令从DOM读取'false'
  4. 指令插入'false',返回false
  5. 相反,您需要更自然的流程:

    1. 指令从DOM
    2. 中读取myvar
    3. 指令插入myvar,返回false
    4. 进一步澄清:

      所有这些插值和评估都在一个$digest周期内完成。插值和更新DOM不会改变表达式的值,只会改变它的显示方式。因此,插值不会触发$watch或新的$digest,如果指令错过了以某种形式看到的值,他们无法知道。因此,指令必须接受原始表达式并自行执行插值以保证准确的结果。