3

HOMEビューとALTビューの2つのビューがある単純なangular.jsアプリに取り組んでいます。この ALT ビュー ページでは、jQuery UI レイアウト プラグインの動作の簡単な例を取得しようとしています。このレイアウト プラグインは、単純に North-South-East-West レイアウト メカニズムを提供します。

問題は、ルーティングを成功させる (MAIN ページと ALT ページの両方に非プラグイン ベースのコンテンツがある場合)、または jQuery UI Layout プラグインを動作させる (私の angular.js アプリのメイン/専用ページで) ことはできますが、できないことです。両方を達成しているようです。

このコードを Plunker にアップロードしました : http://plnkr.co/edit/bcqH3jaoS7PZNgC3el4s特定のプラグインに非常に固有のものであり、これまでのところ解決策に近づいていません。

アドバイス/ガイダンスをいただければ幸いです。ありがとう。

ジョン・キンスティング

4

1 に答える 1

3

あなたは正しい軌道に乗っていました。ディレクティブを介してレイアウトをロードしていましたが、別のモジュール ( mydirectives) にあったため、そのモジュールをアプリに含める必要があります。

例ではそれを単純化しました。ブラウズするaltと、JQuery UI が読み込まれているソースが表示されます (すべてのセクションが期待どおりのスタイルになっています)。

何らかの理由でレイアウトが完璧ではないため、この CSS を追加して高さを調整する必要がありました。私はあなたが好きなようにそれを手に入れるためにそれをいじらせます：

.ui-layout-container{
    height: 500px;
}

http://plnkr.co/edit/peQTwhWFGWvulDZNeeqn?p=previewはこちらapp.js 

var myApp = angular.module('myApp', []).
  config(['$routeProvider', function($routeProvider) {
  $routeProvider.
      when('/home', {templateUrl: 'hello.html',   controller: homeCtrl}).
      when('/alt', {templateUrl: 'alt.html', controller: altCtrl}).
      otherwise({redirectTo: '/home'});
}]);

function homeCtrl($scope, $http) {
    console.log("homeCtrl");
}
function altCtrl($scope, $http) {
    console.log('altCtrl');
}



myApp.directive('layout', function() {
    return {        
        restrict: 'A',
        link: function(scope, elm, attrs) { 
          console.log("applying layout");
            elm.layout({ applyDefaultStyles: true });
        }
    };
});
于 2013-09-19T11:33:23.557 に答える