これは、私の問題を再現するコード スニペットです。
html:
...
<div ng-controller="worker as workerCtrl">
<my-directive label="label" controllerAs="workerCtrl" function="fileUpload(e, this.options)"></my-directive>
</div>
コントローラ:
...
function fileUpload(file, options){...}
...
指令:
function myDirective($compile) {
var directive = {
restrict: 'E',
link: link
};
return directive;
function link(scope, element, attrs) {
var htmlText = '<lx-file-input ' +
'change="'+attrs.controllerAs+'.'+attrs.uploadFunction+'" ' +
'label="'+attrs.label+'"></lx-file-input>';
element.replaceWith($compile(htmlText)(scope));
}
}
(「lx-file-input」はサードパーティのディレクティブです...)
<lx-file-input change="workerCtrl.fileUpload(e, this.options)" label="someLabel"</lx-file-input>
問題は、Angular のコンパイルとリンクのタイミングがずれていることと、コンパイルされた関数ではなく HTML 文字列がテンプレートに残っていることです。コントローラーをディレクティブ内に設定すると機能することはわかっていますが、HTML から同じ「workerCtrl」スコープで同じ関数を使用したいと考えています。