Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view

Question

I am working on a simple angular.js app where I have 2 views: a HOME view and an ALT view. On this ALT view page I am trying to get a simple example of a jQuery UI Layout plug-in working. This layout plugin simply provides a North-South-East-West layout mechanism.

The problem is that while I can get EITHER the routing successful (where both MAIN and ALT pages have non-plugin-based content) OR the jQuery UI Layout plugin working (on main/only page in my angular.js app), I CANNOT SEEM TO ACHIEVE BOTH.

I have this code uploaded to Plunker at: http://plnkr.co/edit/bcqH3jaoS7PZNgC3el4s I have gone through a lot of angular.js documentation and have perused various articles on Angular.js/jQuery-plugin combinations, these articles seem to be very specific to A particular plugin and so far have not brought me any closer to a solution.

Any advice/guidance would be greatly appreciated. Thanks.

Jon Kinsting

Answer 1

You were on the right track. You were loading the layout via a directive, but since it was in another module (mydirectives) you need to include that module in your app.

I simplified that in the example. Now when you browse to alt you can see in the source that the JQuery UI is loading (all the sections as getting the expected styling).

For some reason the layout isn't perfect, I had to add this CSS to give it some height. I'll let you fiddle with that to get it how you like it:

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

Here is the app.js http://plnkr.co/edit/peQTwhWFGWvulDZNeeqn?p=preview

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