在 AngularJS 中动态加载外部模板

Question

我正在尝试在 AngularJS 中构建一个可编辑的表格组件。我希望它工作的方式是，当用户单击特定行上的编辑按钮时，该行将替换为包含绑定到模型的输入字段的“编辑模板”。你可以在这个Plunker看到我的进步。

我正在使用自定义指令来定义一个包含可编辑行的表格，如下所示：

<table ng-controller="peopleController as peopleCtrl">
  <tr editable-row edit-model="person" edit-tmpl="'person-editor.html'"  ng-repeat="person in peopleCtrl.people">
    <td>{{person.name}}</td>
    <td>{{person.age}}</td>
    <td>
      <button>Edit</button>
    </td>
  </tr>
</table>

在可编辑行指令的链接函数中，我将“编辑模板”创建为 html 字符串，并使用 $compile 将表达式绑定到指令范围。我想做的不是在 Link 函数中对 html 进行硬编码，而是从指令“edit-tmpl”属性引用的外部文件加载模板。注意：为指令设置 templateUrl 不起作用，因为我只希望在用户单击编辑按钮时将模板加载并注入到 DOM 中。

我的问题有两个：

1) 如何从我的指令的 Link 函数中的“edit-tmpl”属性引用的模板文件中加载 html？

2) 由于我是 Angular 新手，我想知道我的方法是否符合 AngularJS 的方式？从角度设计的角度来看，通过这样的属性在 HTML 中指定编辑模板，然后在指令的 Link 函数中加载是一个好主意，还是我缺少更好的方法？

Answer 1

app.directive('editableRow', function($compile){
  return{
    restrict:'A',
    replace:true,
    scope: {editModel: '='},


    link: function(scope, element, attr){
      element.find('button').on('click', function(){

            var htmlText = '<div ng-include="{{attr.editTmpl}}"></div>';

             OR

            var htmlText='<div ng-include src="{{attr.editTmpl}}"></div>';

            // I don't know which would work for you. but this is the way to add dynamic template to your directive by just passing appropriate path of template to attr.editTmpl attribute;

        var editTmpl = angular.element($compile(htmlText)(scope));
        element.replaceWith(editTmpl);
      });
    }
  };
});

但我只是想知道你的指令。在这里，您使用的是 replaceWith 方法（它将您的模板替换为现有的一行） 但是在连续编辑完成后，您将如何取回原始模板或 ROW？我想看看兄弟。