3

我正在开发一个简单的 angular.js 应用程序，其中有 2 个视图：主视图和 ALT 视图。在这个 ALT 视图页面上，我试图获得一个 jQuery UI 布局插件工作的简单示例。这个布局插件只是提供了一个北-南-东-西布局机制。

问题是，虽然我可以使路由成功（主页面和 ALT 页面都具有非基于插件的内容）或 jQuery UI 布局插件工作（在我的 angular.js 应用程序的主页面/唯一页面上），但我不能似乎两者都能实现。

我已将此代码上传到 Plunker：http ://plnkr.co/edit/bcqH3jaoS7PZNgC3el4s 我浏览了很多 angular.js 文档，并仔细阅读了有关 Angular.js/jQuery-plugin 组合的各种文章，这些文章似乎非常具体到一个特定的插件，到目前为止还没有让我更接近一个解决方案。

任何建议/指导将不胜感激。谢谢。

乔恩·金斯廷

4

1 回答 1

3

你走在正确的轨道上。您正在通过指令加载布局，但由于它位于另一个模块 ( mydirectives) 中，您需要将该模块包含在您的应用程序中。

我在示例中对此进行了简化。现在，当您浏览到时，alt您可以在源代码中看到 JQuery UI 正在加载（所有部分都获得了预期的样式）。

出于某种原因，布局并不完美，我不得不添加这个 CSS 来给它一些高度。我会让你摆弄它以获得你喜欢的方式：

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

这是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 });
        }
    };
});
于 2013-09-19T11:33:23.557 回答