AngularJS using Gophr Widget

by Gophr .com

HTML

<div ng-app>
  <h2>AngularJS example with quick booking widget</h2>
  <div ng-controller="WidgetCtrl">
    <div
      class="gophr-quick-booking"
      data-env="{{job.env}}"
      data-widget="{{job.widget}}"
      data-pickup-address1="{{job.pickup_address1}}"
      data-pickup-postcode="{{job.pickup_postcode}}"
      data-pickup-company-name="{{job.pickup_company_name}}"
      data-pickup-city="{{job.pickup_city}}"
      data-pickup-country-code="{{job.pickup_country_code}}">
  </div>
</div>
<script>(function(d, s, id) {
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) return;
js = d.createElement(s); js.id = id;
js.src = "//book.gophr.com/widget/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'gophr-jssdk'));</script>

JavaScript

function WidgetCtrl($scope) {
  $scope.job = {
      'pickup_address1': '9 White Lion St',
      'pickup_postcode': 'N1 9PD',
      'pickup_company_name': 'Gophr',
      'pickup_city': 'London',
      'pickup_country_code': 'UK',
      'widget': 'quick-booking',
      'env': 'sandbox'
    };
}