Question

事实是，如果您使用 angularJS +1.6在 html 元素中使用ng-if="truthyValue"和data-ng-if="truthyValue"，受影响的元素将赢得＆＃39 ; t在 DOM 中渲染。即使您将ng-if和data-ng-if与布尔 true一起使用也是如此。

有人知道为什么会这样吗？

Answer 1

这个答案引用了AngularJS custom rule的多个引号。

原因是AngularJS HTML模板是编译的：

对于AngularJS，＆＃34;编译＆＃34;表示将指令附加到HTML以使其具有交互性。

在编译期间，模板指令经历一个名为 Normalization 的过程，该过程涉及将HTML不区分大小写的名称更改为AngularJS中使用的camelCase名称，这遵循以下过程：

从元素/属性的前面剥离data-和:。

将-，_或ngIf - 分隔名称转换为camelCase。

在此过程之后，您可以看到您将两个 ng-if指令附加到同一个HTML元素，然后这些指令会发生干扰（它适用于两次{ {1}}但不是ng-if和data-ng-if，如果有两个而不是它们都到达AngularJS编译器，那么您的网络浏览器会丢弃其中一个ng-if。

因此，不会出现这种情况的解决方案是不要在HTML中使用多个指令，AngularJS会将这些指令规范化为同一个事物。

Answer 2

因此，在尝试了这个之后，使用Angular 1.6.5

看起来它的工作正常

无论如何，你不应该同时使用数据-ng-if和ng-if。坚持其中一个。

<div ng-app="myApp">
  <div ng-controller="MyCtrl">
    <div ng-if="false">hello there</div>
    <div ng-if="true">whats up</div>
  </div>
</div>

var myApp = angular.module('myApp', []);
myApp.controller('MyCtrl', ['$scope', function($scope) {


}]);

这是一个codepen：

https://codepen.io/anon/pen/YxoXgE

此行为不仅出现在ng-if中，还出现在其他角度指令中，例如ng-repeat。当然，删除其中一个声明会立即修复错误。

以下是一个使用ng-repeat和data-ng-repeat无效的示例： https://codepen.io/anon/pen/KvjdZV

NG-IF =＆＃34;真＆＃34; + data-ng-if =＆＃34; true＆＃34;评估为假？

2 个答案: