AngularjsとMaterializeCSSを使用したステートフルモーダルの作成

Question

MaterializeフレームワークのModalコンポーネントとAngularjsのui-routerモジュールを利用しようとしていますが、正しく設定しようとしています。

ここではどのように私は把握しようとしている何を私の$stateProvider定義

// Modal States =============================== 
.state("modal", { 
    views:{ 
     "modal": { 
     templateUrl: "resources/templates/modal.html" 
     } 
    }, 
    abstract: true 
}) 

.state("modal.modal1", { 
    views:{ 
     "modal": { 
     templateUrl: "resources/templates/modals/modal-content-1.html" 
     } 
    } 
    }) 

とトリガー

<div ui-view="modal" autoscroll="false"></div> 

と一緒に私のindex.htmlに `UI-ビューの定義がありますモーダルをレンダリングし、同時にMaterializeボタンのトリガを使用してmodal1状態に切り替えます。

モーダルのinitは十分に簡単です：

<a class="waves-effect waves-light btn" href="#modal1">Modal</a> 
<!-- Modal Structure --> 
<div id="modal1" class="modal"> 
    <div class="modal-content"> 
     <h4>Modal Header</h4> 
     <p>A bunch of text</p> 
    </div> 
    <div class="modal-footer"> 
     <a href="#!" class=" modal-action modal-close waves-effect waves-green btn-flat">Agree</a> 
    </div> 
    </div> 

任意の考え？どうもありがとう！

Answer 1

あなたが書いた状態の設定が正しくないと思われるので、親と子の両方の状態で同じ名前の "モーダル" UIビューを使用しています。 あなたのresources/templates/modal.htmlには "modal"というui-viewも含まれていますか？

親状態は抽象的なため、アクティブにすることはできませんが、子状態をレンダリングするには、親状態のテンプレートにui-viewが必要です。以下 例：

$stateProvider 
    .state('contacts', { 
     abstract: true, 
     url: '/contacts', 

     // Note: abstract still needs a ui-view for its children to populate. 
     // You can simply add it inline here. 
     template: '<ui-view/>' 
    }) 
    .state('contacts.list', { 
     // url will become '/contacts/list' 
     url: '/list' 
     //...more 
    }) 
    .state('contacts.detail', { 
     // url will become '/contacts/detail' 
     url: '/detail', 
     //...more 
    }) 

参考：https://github.com/angular-ui/ui-router/wiki/nested-states-&-nested-views#abstract-state-usage-examples