interop.ts

abstract class AngularShim extends React.Component<Props, State> {
  private _div
  public state = {
    scope: null
  }

  componentWillMount() {
    const scope = Object.assign($rootScope.$new(true), { props: this.props }, this.getScopeMethods())
    this.setState({scope})
  }

  shouldComponentUpdate(props, state) {
    return false
  }

  // called only once to set up DOM, after componentWillMount
  render() {
    return <div ref={div => this._div = div}></div>
  }

  // assign ref to DOM element on `this`
  componentDidMount() {
    const elem = $compile(this.getTemplate())(this.state.scope)[0]
    this._div.appendChild(elem)
  }

  // makes angular aware of changed props
  // if we're not inside a digest cycle, kicks off a digest cycle before setting.
  componentWillReceiveProps(props) {
    if (this.state.scope.$$phase || this.state.scope.$root.$$phase) {
      this.state.scope.props = props
    }
    else {
      this.state.scope.$apply(() => this.state.scope.props = props)
    }
  }

  abstract getTemplate()

  // override this with methods on angular template
  getScopeMethods(): {} {
    return {}
  }

}

class Dropdown2 extends AngularShim {

  getTemplate(): string {
    const template = `
      <geo-button-bar-dropdown
        class="button-bar-dropdown"
        on-change="onChange(value)"
      ></geo-button-bar-dropdown>
    `
    return template
  }

  // defaults to returning an empty object. Add any methods here
  getScopeMethods() {
    return {
      onChange: this.onChange
    }
  }

  onChange(value: string) {
    console.log(`saw value change to ${value}`)
  }

}