コードをリファクタリングして、HTML をより読みやすくするためにディレクティブをさらに活用しようとしています。コンパイル メソッドでいくつかの HTML を移動しようとしています。
app.directive('fancyinput', [ "$rootScope", "SearchBoxData", function($rootScope, SearchBoxData) {
return {
restrict: "A",
template: '<input tabindex="2" id="inputAnimation" class="anim-field" type="text" maxlength="70" spellcheck="false">',
replace: true,
compile: function(tElement, tAttrs) {
tElement.attr('data-ng-class', "{'no-opacity': SearchBoxData.animating == false}");
tElement.attr('data-ng-style', "SearchBoxData.font_style");
tElement.attr('data-ng-focus', "decideToStop(); $root.searchFieldIsFocus = true");
tElement.attr('data-ng-blur' , "decideToStart(); $root.searchFieldIsFocus = false");
return function (scope, element) {
// a lot of code in there.
};
}
};
}]);
HTML:
<div data-ng-controller="SearchboxController">
<input fancyinput>
</div>
data-ng-focus および data-ng-blur のメソッドは、親コントローラーで定義されます。ディレクティブを使用してそれらを html にバインドする方法を見つけようとしています。上記のコードは、それを行うには十分ではないようです。何をすればいいのかわからない... ディレクティブを使用して html を完全に構築する方法はありますか?
編集:これは私がやろうとしていることの図です: