如何将 gridstack-angular.js 与热毛巾模板一起使用
How to use gridstack-angular.js with Hot Towel Template
我正在使用热毛巾模板,我正在尝试使用 gridstack-angular 包。我基本上是在尝试将演示功能添加到 my-page.controller.js、my-page.route.js 和 my-page.html 中。
我使用 bower 加载依赖项并将 'gridstack-angular' 添加到 core.module.js。这是我的-page.html 中出现问题的地方:
<section id="my-page-view" class="content">
<section class="matter">
<div container-fluid>
<h1>gridstack-angular demo</h1>
<p>{{vm.widgets}}</p>
<div>
<a class="btn btn-primary" ng-click="vm.addWidget()" href="#">Add Widget</a>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div gridstack class="grid-stack grid1" options="vm.options" on-change="vm.onChange(event,items)" on-drag-start="vm.onDragStart(event,ui)"
on-drag-stop="vm.onDragStop(event,ui)" on-resize-start="vm.onResizeStart(event,ui)" on-resize-stop="vm.onResizeStop(event,ui)">
<div gridstack-item ng-repeat="w in vm.widgets" class="grid-stack-item" gs-item-x="w.x" gs-item-y="w.y"
gs-item-width="w.width" gs-item-height="w.height" gs-item-autopos="1" on-item-added="vm.onItemAdded(item)" on-item-removed="vm.onItemRemoved(item)">
<div class="grid-stack-item-content">
<a class="btn btn-primary" ng-click="vm.removeWidget(w)" href="#">remove</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
检查浏览器显示在以下位置引用的指令:
<div gridstack ...>
找不到它的 gridstack 控制器。 <p>
和第一个 <div>
元素加载正常。是的,包含在 index.html 中按预期引用。 Chrome 给我一个 't.gridstack is not function'。 gridstack-angular 似乎使用 2 个控制器和一个指令作为 gridstack.js 的包装器,而我一直对 angular 语法感到窒息,试图将它们烘焙到 Hot Towel 中。
Bower 的位...需要在 angular 之前包括 jquery 和 jquery-ui,如 post 中所示:
我正在使用热毛巾模板,我正在尝试使用 gridstack-angular 包。我基本上是在尝试将演示功能添加到 my-page.controller.js、my-page.route.js 和 my-page.html 中。
我使用 bower 加载依赖项并将 'gridstack-angular' 添加到 core.module.js。这是我的-page.html 中出现问题的地方:
<section id="my-page-view" class="content">
<section class="matter">
<div container-fluid>
<h1>gridstack-angular demo</h1>
<p>{{vm.widgets}}</p>
<div>
<a class="btn btn-primary" ng-click="vm.addWidget()" href="#">Add Widget</a>
</div>
<br>
<div class="row">
<div class="col-md-12">
<div gridstack class="grid-stack grid1" options="vm.options" on-change="vm.onChange(event,items)" on-drag-start="vm.onDragStart(event,ui)"
on-drag-stop="vm.onDragStop(event,ui)" on-resize-start="vm.onResizeStart(event,ui)" on-resize-stop="vm.onResizeStop(event,ui)">
<div gridstack-item ng-repeat="w in vm.widgets" class="grid-stack-item" gs-item-x="w.x" gs-item-y="w.y"
gs-item-width="w.width" gs-item-height="w.height" gs-item-autopos="1" on-item-added="vm.onItemAdded(item)" on-item-removed="vm.onItemRemoved(item)">
<div class="grid-stack-item-content">
<a class="btn btn-primary" ng-click="vm.removeWidget(w)" href="#">remove</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
检查浏览器显示在以下位置引用的指令:
<div gridstack ...>
找不到它的 gridstack 控制器。 <p>
和第一个 <div>
元素加载正常。是的,包含在 index.html 中按预期引用。 Chrome 给我一个 't.gridstack is not function'。 gridstack-angular 似乎使用 2 个控制器和一个指令作为 gridstack.js 的包装器,而我一直对 angular 语法感到窒息,试图将它们烘焙到 Hot Towel 中。
Bower 的位...需要在 angular 之前包括 jquery 和 jquery-ui,如 post 中所示: