I created a dynamically resizable div as can be seen in this JSFiddle, but when I tried to put this code into my AngularJS project it doesn't work. NOTE: I have added the jQuery UI CSS. The only error message I receive is when I resize the page, here's what it says
Uncaught TypeError: $(...).resizable is not a function
[line 79 in controller].
Controller
'use strict';
angular.module('oct').controller('Analysis', ['$scope', '$log', 'OctSettings', function($scope, $log, OctSettings) {
var tds = document.getElementsByTagName('td');
var inputs = document.getElementsByTagName('input');
var rows = document.getElementsByTagName('tr');
console.log(inputs);
$scope.changeView = function() {
for (var i = 0; i < inputs.length; i++) {
if (!inputs[i].checked) {
if (tds[i].style.display !== 'none') tds[i].style.display = 'none';
} else {
if (tds[i].style.display === 'none') tds[i].style.display = '';
}
}
if (!inputs[0].checked && !inputs[1].checked) rows[0].style.display = 'none';
else rows[0].style.display = '';
if (!inputs[2].checked) rows[1].style.display = 'none';
else rows[1].style.display = '';
disableChecksIfNeeded();
};
var disableChecksIfNeeded = function(num) {
if (countChecks() > 1) {
enableCheck('all');
} else {
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) inputs[i].disabled=true;
}
}
};
var disableCheck = function(num) {
inputs[num].disabled = true;
};
var enableCheck = function(num) {
if (num === 'all') {
for (var i = 0; i < inputs.length; i++) {
inputs[0].disabled=false;
}
} else {
inputs[num].disabled = false;
}
};
var countChecks = function() {
var count = 0;
var index = -1;
console.log(inputs.length);
for (var i = 0; i < inputs.length; i++) {
if (inputs[i].checked) count++;
}
return count;
};
$scope.changeView();
$(window).on('load resize', function() {
console.log('hi');
var windowWidth = $(window).width();
var windowHeight = $(window).height();
var v1Width = $('#v1').width();
$('#v1').resizable({
minWidth: 50,
maxWidth: windowWidth - 80,
maxHeight: windowHeight * (0.83),
handles: 'e, s'
}).on('resize', function() {
if (v1Width === $('#v1').width()) {
$('#v2').height(0);
}
v1Width = $('#v1').width();
});
$('#v2').resizable({
maxHeight: windowHeight * (0.83),
handles: 's'
}).on('resize', function() {
$('#v1').height(0);
});
});
}]);
View
<section class="analysis" ng-controller="Analysis">
<table>
<tr>
<td id="v1">View 1</td>
<td id="v2">View 2</td>
</tr>
<tr>
<td colspan="2">View 3</td>
</tr>
</table>
<div id="views-container">
<label><input type="checkbox" checked="checked" ng-click="changeView()">
View 1</label>
<label><input type="checkbox" checked="checked" ng-click="changeView()">
View 2</label>
<label><input type="checkbox" checked="checked" ng-click="changeView()">
View 3</label>
</div>
</section>