AngularJS和jQuery UI布局兼容性

为了使用jQueryUI布局（从下载）获得一个非常基本的布局，我已经苦苦挣扎了几天

以下是

ng包含
ed页面：

<div id="Main_Working_Page" ng-controller="Main_Working_Page_Controller" style="height:100%;">

    <div id="Muti_Panel" style="height:100%">

        <div class="ui-layout-north">
            This is the north pane
        </div>

        <div class="ui-layout-west">
            This is the north west
        </div>

        <div id="tabs-center" class="ui-layout-center no-scrollbar add-padding grey">

            This is the central panel

        </div>

    </div>

</div>

页面显示为空白（完全没有！！！），查看内容的唯一方法是在Chrome中进入调试模式，并将一些
…位置：绝对…
更改为
…位置：相对…
。当这样做时，布局仍然远离我想要的，但至少是可见的

要么我在使用UI布局的方式上缺少了一些真正基本的东西，要么与AngularJS存在冲突。
“[…]与AngularJS存在冲突”=>好吧，您可能不应该将jQuery库与AngularJS一起使用。所以如果你能改变，改变。如果你能提供一把小提琴，我可以帮你解决根本原因。全世界有很多网站同时使用这两种工具（AngularJS和JQuery），包括我过去做过的没有任何问题的其他项目。我的问题不是关于JQuery，而是关于JQuery UI布局的。@Pramod_Para，谢谢。这对我来说并不简单，因为包含了相当多的库（JQuery、Bootstrap、AngularJS），而且，我必须羞耻地承认，我从来没有创建过一个fiddler库。如果你有具体的事情要检查，我可以进行检查并告诉你结果是什么。可以吗？我们已经在项目中使用了很多jquery和angularJS，所以使用这两个应该都不是问题
MyApp.controller('Main_Working_Page_Controller' , ['$rootScope' , '$scope' ,  'DB_Services' , function( $rootScope , $scope , DB_Services) {

    console.log(">>> Started Main_Working_Page_Controller") ;

    var Main_Page_Layout = $("#Muti_Panel").layout(
        {
            defaults: {
                fxName              :   "slide"     ,
                fxSpeed             :   "slow"      ,
                spacing_closed      :   14          ,
                initClosed          :   false       ,
                size                :   "200"       ,
                spacing_open        :   6           ,
                spacing_closed      :   6 
            }    ,

            applyDefaultStyles      :   true        ,

            north: {
                fxName              :   "slide"     ,
                spacing_closed      :   8           ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   100         ,
                autoResize          :   false

            }    ,
            south: {
                fxName              :   "slide"     ,
                spacing_closed      :   8           ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   100         ,
                autoResize          :   false 
            }    ,
            east: {
                fxName              :   "slide"     ,
                spacing_closed      :   15          ,
                togglerLength_closed:   "100%"      ,
                closable            :   true        ,
                resizable           :   true        ,
                slidable            :   true        ,
                initClosed          :   false       ,
                initHidden          :   false       ,
                size                :   300         ,
                autoResize          :   false
            }    ,
            center: {
                fxName              :   "slide"     ,
                closable            :   false       ,
                size                :   300
            }
        }
    ) ;

    Main_Page_Layout.resizeAll() ;

}]) ;