Динамическая загрузка внешнего шаблона в 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 и использование компиляции $ для привязки выражений к области директивы. То, что я хотел бы сделать вместо жесткого кодирования html в функции Link, заключается в том, что шаблон загружен из внешнего файла, ссылающегося на атрибут «edit-tmpl». Примечание. Установка шаблонаUrl для директивы не будет работать, так как я хочу, чтобы шаблон загружался и вводился в DOM, когда пользователь нажимает кнопку редактирования.

Мой вопрос заключается в два раза:

1) Как я могу загрузить HTML из файла шаблона, на которую ссылается атрибут «редактировать-Tmpl» в функции Link моей директивы?

2) Поскольку я новичок в Angular, мне интересно, подходит ли мой подход к способу AngularJS? С точки зрения углового дизайна хорошей идеей является создание шаблона редактирования, указанного в HTML, через атрибут, подобный этому, а затем загруженный внутри функции ссылки директивы или есть лучший подход, который мне не хватает?

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 после редактирования в строке? Я бы хотел увидеть его брата.