Angular中ng-if异常导致无指令元素被隐藏问题咨询

刚从Vue转Angular踩这种DOM解析的坑太正常了，我帮你分析下问题根源：

核心问题：自闭合块级元素导致DOM结构错乱 #

你代码里那些带ng-dropdown-multiselect的<div>用了自闭合写法 <div ... />，但HTML规范里<div>是块级元素，绝对不能自闭合，必须用完整的<div></div>标签对。

Angular（尤其是早期版本）对这种不规范的自闭合块级元素解析会出错，第一个带ng-if的自闭合div会错误地把后面所有元素都包裹进它的作用域里。当SelectedTask.location为false时，这个ng-if块被隐藏，后面本该显示的非ng-if元素也跟着被一起隐藏了，这就是为啥只有第一个ABS输入框能正常显示。

修复后的代码 #

把所有自闭合的<div ng-dropdown-multiselect... />改成完整标签对即可：

<div class="form-group"> 
  <label class="col-sm-3 control-label">ABS</label> 
  <div class="col-sm-6"> 
    <input type="text" ng-model="absTarget" class="form-control" placeholder="Set Target" /> 
  </div> 
</div> 
<div class="form-group" ng-if="SelectedTask.location"> 
  <label class="col-sm-3 control-label">Location</label> 
  <div ng-dropdown-multiselect="" options="example10data" selected-model="absLocation" checkboxes="true" extra-settings="setting1"></div> 
</div> 
<br /> 
<div class="form-group"> 
  <label class="col-sm-3 control-label">Seven Star</label> 
  <div class="col-sm-6"> 
    <input type="text" ng-model="ssTarget" class="form-control" placeholder="Set Target" /> 
  </div> 
</div> 
<div class="form-group" ng-if="SelectedTask.location"> 
  <label class="col-sm-3 control-label">Location</label> 
  <div ng-dropdown-multiselect="" options="example10data" selected-model="ssLocation" checkboxes="true" extra-settings="setting1"></div> 
</div> 
<div class="form-group"> 
  <label class="col-sm-3 control-label">DEN</label> 
  <div class="col-sm-6"> 
    <input type="text" ng-model="denTarget" class="form-control" placeholder="Set Target" /> 
  </div> 
</div> 
<div class="form-group" ng-if="SelectedTask.location"> 
  <label class="col-sm-3 control-label">Location</label> 
  <div ng-dropdown-multiselect="" options="example10data" selected-model="denLocation" checkboxes="true" extra-settings="setting1"></div> 
</div>

额外小提醒 #

你给出的对象是selectedTask（小写s），但模板里用的是SelectedTask.location（大写S），如果这是实际代码里的笔误，记得修正变量名大小写，不然ng-if的判断逻辑也会失效哦～

内容的提问来源于stack exchange，提问作者BeaST 30