jQuery resizable is not working inside of Angular JS

Question

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>

Are you sure your jquery-ui library files are visible to this file?? — dvenkatsagar, Jan 31 '16 at 17:35
Console log this `Jquery.ui` to see if it loaded, like this : http://stackoverflow.com/questions/2260250/testing-if-jqueryui-has-loaded — dvenkatsagar, Jan 31 '16 at 17:41

dvenkatsagar · Accepted Answer · 2016-01-31T18:00:17.047

The only reason that I can think of is that, maybe the jquery-ui library is not visible to that file. First thing you might want to do is keep a line like this:

console.log(Jquery.ui);

And see if the ui library is loaded or not. If it is not, you need to find a way to make it visible to the Controller. For that, one solution might be to add the Library to your index.html or the specific view file that you want the jquery-ui to work on.

Another reason that I can come up with is, there might be incompatibility with the jquery and jquery-ui libraries. If you are using a the latest version of the jquery-ui, then it should be working with jquery 1.7 and above

Hope this helps.

yep I thought I only needed jquery forgot about jquery ui js file — Daniel Kobe, Jan 31 '16 at 18:00

jQuery resizable is not working inside of Angular JS

Controller

View

1 Answers1