I'm working with the Hot Towel Template and I'm trying to use the gridstack-angular package. I'm basically trying to add the demo functionality into my-page.controller.js, my-page.route.js and my-page.html.
I've used bower to load the dependencies and added 'gridstack-angular' to core.module.js. Here's where things break in my-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>
Inspecting the browser shows that the directive referenced at:
<div gridstack ...>
cannot find its gridstack controller. The <p> and first <div> elements load fine. And yes, the includes are referenced as expected in index.html. Chrome gives me a 't.gridstack is not function'. It appears that gridstack-angular uses 2 controllers and a directive as wrappers for gridstack.js and I've been choking on the angular syntax trying to bake these into Hot Towel.
Bit by bower... needed to include jquery and jquery-ui before angular as can be seen in this post: Control order of source files