Skip to content

Usage with AngularJS

Richard Venneman edited this page Feb 13, 2018 · 2 revisions

After including the float.js, you can define and use the directive below:

.directive('ngFloatl', function () {
  return {
    link: function (scope, elem, attrs, ctrl)  {
      var wrapper = elem[0];
      var label = wrapper.querySelector('label');
      var input = wrapper.querySelector('input');

      angular.element(elem).addClass('floatl');
      angular.element(label).addClass('floatl__label');
      angular.element(input).addClass('floatl__input');

      new Floatl(wrapper);
    }
  }
})
<div ng-floatl>
  <label for="first_name">First name</label>
  <input name="first_name" type="text" placeholder="First name" />
</div>
Clone this wiki locally