Dynamiczne ładowanie zewnętrznego szablonu w AngularJS - angularjs, angularjs-directive

Próbuję zbudować edytowalny składnik tabeliw AngularJS. Chcę, aby działał tak, że gdy użytkownik kliknie przycisk Edytuj w danym wierszu, wiersz ten zostaje zastąpiony „szablonem edycji” zawierającym pola wejściowe powiązane z modelem. Widać w tym mój postęp Plunker.

Korzystam z niestandardowej dyrektywy, aby umożliwić mi zdefiniowanie tabeli z edytowalnymi wierszami:

<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>

W dyrektywie edytowalnego wiersza funkcja Link Itworzę „szablon edycji” jako ciąg html i używam $ compile do powiązania wyrażeń z zakresem dyrektywy. To, co chciałbym zrobić zamiast twardego kodowania HTML w funkcji Link, to załadowanie szablonu z zewnętrznego pliku, do którego odwołują się atrybuty dyrektyw „edit-tmpl”. Uwaga: Ustawienie templateUrl dla dyrektywy nie zadziała, ponieważ chcę, aby szablon był ładowany i wstrzykiwany do DOM, gdy użytkownik kliknie przycisk edycji.

Moje pytanie jest dwojakie:

1) Jak mogę załadować HTML z pliku szablonu, do którego odnosi się atrybut „edit-tmpl” w ramach funkcji Link mojej dyrektywy?

2) Ponieważ jestem nowy w Angular, zastanawiam się, czy mójczy podejście jest zgodne z AngularJS? Z punktu widzenia projektowania kątowego, czy dobrym pomysłem jest określenie szablonu edycji w HTML za pomocą takiego atrybutu, a następnie załadowanie go do funkcji Link w dyrektywie, czy też istnieje lepsze podejście, którego mi brakuje?

Odpowiedzi:

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);
});
}
};
});

Ale zastanawiam się nad twoją dyrektywą. Ponieważ tutaj używasz metody replaceWith (która zastąpi szablon do istniejącego w rzędzie) ale jak możesz odzyskać oryginalny szablon lub ROW po zakończeniu edycji w wierszu? Chciałbym to zobaczyć, bracie.