2
我有一個簡單的頁面，我試圖使用JQuery Layout插件。該代碼是：JQuery Layout與AngularJS
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Layout Example</title>
</head>
<body>
<div class="ui-layout-center">
Angular test:
<input type="text" ng-model="name" />{{name}}
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.directive('body', function() {
return {
restrict: 'E',
link: function(scope, elm, attrs) {
console.log("applying layout");
elm.layout({
applyDefaultStyles: true
});
}
};
});
</script>
</body>
</html>
現在，當我嘗試來包裝UI佈局容器，沒有出現在屏幕上。不過，我可以在Web開發人員工具欄中看到佈局的完整代碼。代碼是：
<!DOCTYPE html>
<html ng-app="app">
<head>
<title>Layout Example</title>
</head>
<body>
<div class="wrapper">
<div class="ui-layout-center">
Angular test:
<input type="text" ng-model="name" />{{name}}
</div>
<div class="ui-layout-north">North</div>
<div class="ui-layout-south">South</div>
<div class="ui-layout-east">East</div>
<div class="ui-layout-west">West</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://code.angularjs.org/1.2.13/angular.js"></script>
<script src="http://layout.jquery-dev.net/lib/js/jquery.layout-latest.js"></script>
<script type="text/javascript">
var app = angular.module('app', []);
app.directive('wrapper', function() {
return {
restrict: 'C',
link: function(scope, elm, attrs) {
console.log("applying layout");
elm.layout({
applyDefaultStyles: true
});
}
};
});
</script>
</body>
</html>
所以，看起來我無法正確傳遞類名稱。什麼應該作爲類名傳遞以使其工作？謝謝
編輯：您可以複製和粘貼Plunker中的代碼來查看問題。