Angular.js应用具有路由..不能让jQuery UI的布局插件2日视图中工作 [英] Angular.js App with routing.. Cannot get jquery ui layout plugin working on 2nd view

问题描述

我工作的一个简单的应用程序angular.js在那里我有2次：家庭视图和ALT视图。在此ALT视图页面，我试图让一个jQuery UI布局的一个简单的例子插件工作。这种布局插件只是提供了一个北 - 南 - 东 - 西布局机制。

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.

问题是，虽然我可以得到无论是路由成功（其中主，ALT网页有非插件，基于内容）或jQuery UI的布局插件工作（主/只页面上我angular.js应用程序） ，我似乎无法既能实现。

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.

我有这样的code上传给在Plunker： http://plnkr.co/edit/bcqH3jaoS7PZNgC3el4s
我已经经历了很多angular.js文档不见了，并细读上Angular.js / jQuery的，插件，组合各种文章，这些文章似乎是非常具体到特定的插件，到目前为止还没有接近的解决方案给我带来任何。

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.

任何意见/指导将大大AP preciated。谢谢。

Any advice/guidance would be greatly appreciated. Thanks.

乔恩Kinsting

Jon Kinsting

推荐答案

您在正确的轨道上。你是通过加载指令的布局，但因为它是在另一个模块（ mydirectives ），您需要包括模块中您的应用程序。

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.

我简化，在实施例。现在，当你浏览到 ALT 您可以在JQuery的UI加载（所有部分为得到预期的造型）来源看。

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).

由于某些原因，布局是不完美的，我不得不添加这个CSS给它一些高度。我让你与摆弄得到它你喜欢它：

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

下面是 app.js 的 http://plnkr.co/edit/peQTwhWFGWvulDZNeeqn?p=$p$pview

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

这篇关于Angular.js应用具有路由..不能让jQuery UI的布局插件2日视图中工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！