Question

我有textarea我希望使用Angular指令调整某些事件的大小。

到目前为止我对事件'keydown'有用，但我似乎无法弄清楚如何让这些功能适用于其他事件。

我还尝试了解如何在不使用jquery事件的情况下实现此功能。

我想要的是在数据加载到textarea后以及整个浏览器窗口调整大小时触发更新功能。

指令：

var app = angular.module('directives', []);

app.directive('autoGrow', function() {
  return function(scope, element, attr){
    var update = function(event) {
      element.css('height', element[0].scrollHeight + 'px');
    }
    element.bind('keydown', update); // Works
    element.bind('load', update);    // Doesn't quite have desired effect.
    element.bind('resize', update);  // Doesn't quite have desired effect.
    update();
  }
});

HTML：

<textarea auto-grow type="text" ng-model="model.foo">

编辑：为了确保我得到了我的观点，上面的所有绑定元素都按照它们应该触发。我正在寻找一种方法，我可以在以下情况下触发更新功能：调整窗口大小以及更改ng模型或在元素中更新数据。

Answer 1

以下是我的建议：

注入$ window服务以便能够向resize事件注册回调

指定您的自定义指令要求ng-model指令能够监视模型更改

var app = angular.module（＆＃39;指令＆＃39;，[]）;

app.directive（＆＃39; autoGrow＆＃39;，function（$ window）{ 返回{ 要求：＆＃39; ngModel＆＃39;， link：function（scope，element，attr，ngModelCtrl）{

    scope.$watch(function () {
      return ngModelCtrl.$modelValue;
       },
       update,
       true // if deepwatch is required
       );

    var update = function(event) {
      element.css('height', element[0].scrollHeight + 'px');
    }

    element.on('keydown', update); // Works
    element.on('load', update);    // Doesn't quite have desired effect.
    element.on('resize', update);  // Doesn't quite have desired effect.
    update();

    angular.element($window).on('resize', update);
  }

};
}）;

更多资源：

使用angular指令使用element.bind（事件，函数）在触发器上调整textarea的大小

1 个答案: