支持路由的Angular.js应用程序..无法使jquery ui布局插件在第二个视图上工作
支持路由的Angular.js应用程序..无法使jquery ui布局插件在第二个视图上工作
提问于 2013-09-18 18:04:40
我正在开发一个简单的angular.js应用程序，其中我有两个视图:一个主视图和一个ALT视图。在这个ALT视图页面上，我试图获得一个简单的jQuery UI布局插件的工作示例。这个布局插件简单地提供了一个北-南-东-西的布局机制。
问题是，虽然我可以获得路由成功( MAIN和ALT页面都有不基于插件的内容)或jQuery UI布局插件工作(在我的angular.js应用程序的main/only页面上)，但我似乎无法同时实现这两个目标。
我已经把这段代码上传到了：http://plnkr.co/edit/bcqH3jaoS7PZNgC3el4s。我已经阅读了大量的angular.js文档，并仔细阅读了各种关于Angular.js/jQuery-plugin组合的文章，这些文章似乎都是针对某个特定的插件的，到目前为止还没有给我带来任何解决方案。
任何建议/指导都将不胜感激。谢谢。
乔恩·金斯汀
回答 1
Stack Overflow用户
发布于 2013-09-19 11:33:24
你走在了正确的道路上。您是通过指令加载布局的，但由于它位于另一个模块(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 });
}
};
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/18879228
复制相关文章
相似问题
腾讯云开发者
