如何使用gridstack-angular.js与热毛巾模板

时间:2016-07-19 20:02:18

标签: html angularjs hottowel

我正在使用Hot Towel模板,我正在尝试使用gridstack-angular软件包。我基本上试图将演示功能添加到my-page.controller.js,my-page.route.js和my-page.html中。

我使用bower加载依赖项并将“gridstack-angular”添加到core.module.js。以下是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>

检查浏览器会显示引用的指令:

<div gridstack ...>

找不到它的gridstack控制器。 <p>和第一个<div>元素加载正常。是的,包含在index.html中按预期引用。 Chrome给了我't.gridstack is not function'。似乎gridstack-angular使用2个控制器和一个指令作为gridstack.js的包装器,我一直在试图将这些用于烘烤这些热毛巾的角度语法。

1 个答案:

答案 0 :(得分:0)

bit by bower ...需要在角度之前包含jquery和jquery-ui,如本文所示:Control order of source files