【问题标题】:AngularJS ng-if and DOM CompilationAngularJS ng-if 和 DOM 编译
【发布时间】:2023-04-10 07:04:01
【问题描述】:

我在我的页面上使用了一个 datepicker 控件,它通过 ng-if 呈现,取决于特定的下拉值。

我面临的问题是,由于在渲染时,datepicker 输入不是 DOM 的一部分,所以后来当我更改下拉列表的值时,datepicker 控件不起作用。

如果我使用 ng-show,我会在验证中遇到问题。

有什么建议吗?

谢谢。

【问题讨论】:

  • 您使用哪个日期选择器还是自制的?您是否尝试使用 ControllerAs 语法?

标签: angularjs angular-ng-if


【解决方案1】:

使用ng-show/ng-hide 而不是ng-if 因为ng-if 指令根据表达式删除或重新创建DOM 树的一部分。如果分配给 ng-if 的表达式的计算结果为 false 值,则从 DOM 中删除该元素,否则将该元素的克隆重新插入到 DOM 中。

更多细节。请参考此链接:what is the difference between ng-if and ng-show/ng-hide

【讨论】:

  • 在 ng-show/hide 的情况下,我必须手动处理验证,对吧?
  • @AliHassan 不。 ng-show 也可以用作 ng-if。您只需将您提到的表达式放在ng-if 表达式中即可。
  • 谢谢 Ramesh,让我看看。
  • 值得补充的是,ng-if 还创建了一个新的范围,它可能有它的缺点。
  • @AliHassan ng-show 不能作为ng-if 工作。主要区别在于第一个仅使用 css display:none 隐藏元素,而第二个从 DOM 中删除元素。这意味着 ng-show 将保留验证错误,因为 ngModelController 仍然可用。您能否在 plnkr 重新创建您的代码?
【解决方案2】:

在切换 ng-if 变量后尝试“$scope.apply()”。

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 2017-07-14
    • 2015-02-14
    • 2015-08-27
    • 1970-01-01
    • 2013-11-14
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多