javascript - 可调整大小的 jQuery 在 Angular JS 中不起作用

Question

我创建了一个可动态调整大小的 div，如 JSFiddle 中所示，但是当我尝试将此代码放入我的 AngularJS 元素时，它不起作用。注意:我添加了 jQuery UI CSS。我收到的唯一错误消息是当我调整页面大小时，这是它说的

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);
        });

    });

}]);

查看

<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>

Answer 1

我能想到的唯一原因是，也许 jquery-ui 库对该文件不可见。您可能想要做的第一件事是保留这样一行:

console.log(Jquery.ui);

然后查看 ui 库是否已加载。如果不是，则需要找到一种方法使其对 Controller 可见。为此，一种解决方案可能是将库添加到您的 index.html 或您希望 jquery-ui 处理的特定 View 文件。

我能想到的另一个原因是，可能与 jquery 和 jquery-ui 库不兼容。如果您使用的是最新版本的 jquery-ui，那么它应该适用于 jquery 1.7 及更高版本

希望这对您有所帮助。