AngularJS如何通过自定义指令向已有LI的UL动态插入LI元素

你当前的写法无法得到预期DOM结构，核心原因是浏览器原生HTML解析优先级高于AngularJS执行逻辑：<ul> 标签仅允许 <li>、<template>、<script> 这类合规子元素，你写的自定义元素 <hello-world> 会在Angular启动、编译模板之前，就被浏览器自动移出<ul>节点。后续即使配置了replace:true，指令生成的<li>也会被插入到<ul>外部，无法达到预期效果。

优先使用属性型指令实现，完全规避非法HTML嵌套问题，代码简洁且符合AngularJS设计规范：

• 修改指令定义：将指令的限制类型从元素（E）改为属性（A），其余配置基本保持不变

angular.module('components', []).directive('helloWorld', function() {
    return {
        restrict: 'A',
        template: '<li>I be dynamic. much cool</li><li>I too be dynamic. many wow</li>',
        replace: true,
        controllerAs: "vm",
        controller: [function(){
            var ctrl = this;
            ctrl.$onInit = function() {
              // 自定义业务逻辑可写在此处
            };
        }]
    };
});

• 调整HTML占位：在需要插入动态<li>的位置，写一个空的<li>标签挂载指令即可，这个空标签会被Angular自动替换为模板里的两个<li>

<div ng-controller='myctrl'>
    <ul>
      <li>already here</li>
      <li hello-world></li>
    </ul>    
<div>

渲染后就会得到你预期的DOM结构，不会出现元素错位问题。

可选替代方案 #

如果你不想额外写空<li>占位，也可以使用注释型指令（restrict: 'M'），注释节点不会被浏览器判定为非法子元素：

1. 指令配置修改为restrict: 'M'
2. HTML中在对应位置写标准格式的指令注释：

   <div ng-controller='myctrl'>
       <ul>
         <li>already here</li>
         <!-- directive: hello-world -->
       </ul>    
   <div>
   

注意：注释格式必须严格匹配，directive: 后接指令名，前后保留空格，否则Angular无法识别。不推荐在link函数中手动操作DOM插入节点的写法，可维护性差，也不利于后续做DOM更新、作用域绑定。

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