AngularJS中动态推送模板至行的实现技术问询

嘿，我看你在尝试通过Angular把自定义指令动态注入DOM，但估计遇到指令没生效的问题了吧？这是因为Angular不会自动编译你直接存在$scope里的HTML字符串，下面给你拆解问题和可行的解决方案：

1. 先把你的指令代码优化下 #

你的指令定义整体没问题，只是结尾多了个逗号，严格模式下可能会报错，调整成这样更稳妥：

.directive('myCustomRowTemplate', function () { 
  return { 
    templateUrl: '/sites/all/themes/platinum_printing/js/extjs/angular/views/campaign_script_options.html'
  }; 
});

2. 动态注入指令的正确姿势 #

直接把HTML字符串塞到$scope里绑定是行不通的，得让Angular编译这段HTML才能识别里面的指令，这里有两种常用方案：

方案一：用自定义指令处理动态编译（推荐，符合Angular最佳实践） #

先写一个专门用来编译动态HTML的指令：

.directive('compileHtml', ['$compile', function($compile) {
  return function(scope, element, attrs) {
    // 监听绑定的变量变化
    scope.$watch(attrs.compileHtml, function(newHtml) {
      if (newHtml) {
        element.html(newHtml);
        // 编译元素内容，让Angular解析里面的指令
        $compile(element.contents())(scope);
      }
    });
  };
}]);

然后在视图里这样使用：

<!-- 假设你用ng-repeat遍历personalDetails -->
<div ng-repeat="item in personalDetails">
  <div compile-html="item.add_template"></div>
</div>

记得把你$scope里的变量拼写修正下（add_tempalte多了个t，改成add_template）：

$scope.personalDetails = [{
  'add_template': '<div my-custom-row-template></div>'
}];

方案二：在控制器里直接编译（不推荐，尽量少用） #

如果实在要在控制器里操作，你可以注入$compile服务，但这其实是Angular的反模式（控制器不该直接碰DOM），代码大概是这样：

.controller('YourController', ['$scope', '$compile', '$element', function($scope, $compile, $element) {
  $scope.addNew = function() {
    // 定义要注入的模板HTML
    var templateHtml = '<div my-custom-row-template></div>';
    // 编译HTML并绑定当前scope
    var compiledElement = $compile(templateHtml)($scope);
    // 把编译好的元素添加到DOM的目标位置，比如id为rowContainer的元素
    angular.element(document.getElementById('rowContainer')).append(compiledElement);
  };
}]);

几个重要提醒 #

• 优先用方案一，控制器专注处理数据逻辑，DOM操作交给指令才是Angular的正确打开方式。
• 检查你的templateUrl路径是否正确，要是浏览器控制台报404，先确认这个HTML文件能正常访问。
• 注意变量名拼写，你原来代码里的add_tempalte是拼写错误，一定要修正，不然绑定会失效。

内容的提问来源于stack exchange，提问作者noobie-php