你走在正确的轨道上。您正在通过指令加载布局,但由于它位于另一个模块 ( 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 });
}
};
});