3

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

Jon Kinsting
  • 39
  • 2

1 Answers1

3

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 });
        }
    };
});
checketts
  • 14,167
  • 10
  • 53
  • 82
  • checketts, thank you! That was absolutely the right answer. The directives wiring can be tricky. Your solution worked perfectly. Believe me, I'll pass this favor "forward". -- Jon – Jon Kinsting Sep 19 '13 at 13:38
  • Glad it worked. Be sure to mark the answer as 'correct' (Select the Check mark) so it is clear to others that you found the needed answer. – checketts Sep 20 '13 at 12:26