angular mod example

https://blog.thousandeyes.com/creating-extensible-widgets-part-1-jquery-to-angularjs/

by merganser

HTML

<div ng-app="myMod">
    <input id="myText" type="text" placeholder="Type here!" />
    <div>
        <svg width="500" height="200">
            <rect shape-text="#myText"
                x="0" y="20"
                fill="lightblue" />
            <circle shape-text="#myText"
                cx="150" cy="50" r="10" fill="lightgreen" />
        </svg>
    </div>
</div>

JavaScript

angular.module('myMod', [])

.directive('shapeText', function () {

  return {
    link: linkFn
  };

  function linkFn(scope, $element, iAttrs) {
    var d3element = d3.select($element[0]),
        modelSelector = iAttrs.shapeText,
        $model = angular.element(modelSelector);

    // Set up text field
    var d3text = setupTextField($element);

    // Set up update functions depending on type of element
    var updateSizeFn;
    if ($element.is('rect')) {
      updateSizeFn = rectUpdateSizeFn(d3element, d3text);
    } else if ($element.is('circle')) {
      updateSizeFn = circleUpdateSizeFn(d3element, d3text);
    } else {
      throw new Error('shapeText called on unsupported element');
    }

    var changeFn = function () {
      // Update text
      d3text.text($model.val());

      // Get bounding box
      var bbox = d3text.node().getBBox();

      // Update sizes
      updateSizeFn(bbox);
    };

    $model.on('input change', changeFn);
  }

  // ... Other functions are unchanged ...

});