compile: vs link(pre/post)vsの各項目の目的はすでにわかっています。controller
だから私はこの単純なコードを持っているとしましょう：
HTML
<body ng-controller="mainController">
{{ message }}
<div otc-dynamic=""></div>
</body>
Controller
app.controller("mainController", function($scope) {
$scope.label = "Please click";
$scope.doSomething = function() {
$scope.message = "Clicked!";
};
});
Directive
app.directive("otcDynamic", function($compile) {
var template = "<button ng-click='doSomething()'>{{label}}</button>";
return {
compile: function(tElement, tAttributes) {
angular.element(tElement).append(template);
for (var i = 0; i < 3; i++) {
angular.element(tElement).append("<br>Repeat " + i + " of {{name}}");
}
return function postLink(scope, element, attrs) {
scope.name = "John";
}
}
}
});
ご覧のとおり、テンプレートを変更します（compile関数で-実際にあるべき場所です）
結果 ( plnker ):
しかし
それが関数template:...を取ることもできるとは知りませんでした。
したがって、template代わりに関数を使用できます（plunker）：
app.directive("otcDynamic", function() {
var template1 = "<button ng-click='doSomething()'>{{label}}</button>";
return {
template: function(element, attr) {
element.append(template1);
for (var i = 0; i < 3; i++)
element.append("<br>Repeat " + i + " of {{name}}");
},
link: function(scope, element) {
scope.name = "John";
}
}
});
質問
その場合 -template関数 vscompile関数はいつ使用する必要がありますか?