ホットタオルテンプレートでgridstack-angular.jsを使用する方法

Question

ホットタオルテンプレートを使用していて、グリッドスタックパッケージを使用しようとしています。私は基本的にデモ機能をmy-page.controller.js、my-page.route.js、my-page.htmlに追加しようとしています。

私はbowerを使って依存関係を読み込み、core.module.jsに 'gridstack-angular'を追加しました。物事は私の-page.htmlで破るのはここです：そのgridstackコントローラーを見つけることができません

<div gridstack ...> 

：

ブラウザの検査

<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> 

はディレクティブがで参照することを示しています。 <p>と最初の<div>要素は正常に読み込まれます。もちろん、インクルードはindex.htmlで期待どおりに参照されます。クロムは私に 't.gridstack is not function'を与えます。 gridstack-angularは2つのコントローラーとgridstack.jsのラッパーとしてのディレクティブを使用するように見えます。そして、これらをホットタオルに焼き付けようとする角度の構文を窒息しています。

Answer 1

jqueryとjquery-uiを角度の前に含める必要があります。Control order of source files