jQuery可調整大小不能在Angular JS中工作

Question

我創建了一個可動態調整大小的div，可以在JSFiddle中看到，但是當我嘗試將此代碼放入我的AngularJS項目中時，它不起作用。注意：我已經添加了jQuery UI CSS。我收到的唯一錯誤信息是當我調整頁面大小時，這裏是它所說的

Uncaught TypeError: $(...).resizable is not a function [控制器中的第79行]。

控制器

'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庫。如果不是，您需要找到一種方法讓控制器看到它。爲此，一種解決方案可能是將庫添加到您的index.html或您希望jquery-ui工作的特定視圖文件中。

我能想出的另一個原因是，可能與jquery和jquery-ui庫不兼容。如果您使用的是最新版本的jquery-ui，那麼它應該使用jquery 1.7及以上版本

希望這會有所幫助。