StackOverflow_23066731: using-jqueryui-resizeable-with-angularjs

Illustration of answer to http://stackoverflow.com/questions/23066731/using-jqueryui-resizeable-with-angularjs.

by upsidown

HTML

<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.min.js"></script>
<script src="http://code.angularjs.org/1.2.16/angular.min.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?key= AIzaSyCkUOdZ5y7hMm0yrcCQoCvLwzdM6M8s5qk"></script>
<div ng-controller="myCtrl">
  <div resizable>
    <div id="map-canvas"></div>
  </div>
  <div>
    <table class="table table-condensed table-hover">
      <thead>
        <tr>
          <th>Col 1</th>
          <th>Col 2</th>
          <th>Col 3</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
        <tr>
          <td>A</td>
          <td>B</td>
          <td>C</td>
        </tr>
      </tbody>
    </table>
  </div>
</div>

CSS

div[resizable] {
  border-bottom: 5px solid grey;
  width: 100%;
}

#map-canvas {
  height: 200px;
}

JavaScript

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

app.controller('myCtrl', function($http, $scope) {

  initMap();
});

app.directive('resizable', function() {
  return {
    restrict: 'A',
    scope: {
      callback: '&onResize'
    },
    link: function postLink(scope, elem, attrs) {
      elem.resizable();
      elem.on('resizestop', function(evt, ui) {
        if (scope.callback) {
          scope.callback();
        }
      });
      elem.on('resize', function(evt, ui) {

        // Set map container height based on resizable element height
        $('#map-canvas').height($('div[resizable]').height());
      });
    }
  };
});

function initMap() {
  let mapOptions = {
    zoom: 8,
    minZoom: 8,
    center: new google.maps.LatLng(43, -81),
    mapTypeId: google.maps.MapTypeId.ROADMAP,
  };
  map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
}