1

我一直在尝试重构我的代码以更多地使用指令来使 html 更具可读性，我试图在 compile 方法中移动一些 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？

编辑：这是我正在尝试做的说明：

http://plnkr.co/edit/YNYvQrqqvKqeBTrU2qfL?p=preview

4

0 回答 0