2016-09-12 8 views
0

こんにちは、私はフォントのawesomeアイコンに一種の設定メニューとしてuib-popover-templateを使用しようとしていますが、表示するにはポップアップが表示されません。uib-popover-templateが表示されない

<h3>{{vm.title}} 
     <i class="fa fa-ellipsis-v pull-right" 
      aria-hidden="true" 
      uib-popover-template="'options-panel.html'" 
      popover-placement="left"></i> 
    </h3> 

、私は一種の「より多くのオプション」メニューのような右コーナーで楕円を持っている:これは私が使用しているページのヘッダーにあります。 options-panel.htmlはこのようになりますページに応じて、ちょうど4-5 <select>ドロップダウンです:

<div class="row"> 
    <div class="form-group col-md-12"> 
    <label for="viwemode">View&nbsp;Mode</label> 
    <select id="viewmode" 
     class="form-control" 
     ng-model="vm.currentViewer" 
     ng-options="view for view in vm.views" 
     ng-change="vm.viewChange();"></select> 
    </div> 
    <div class="form-group col-md-12" 
     ng-repeat="viewOption in vm.genericOptions"> 
    <label for="{{viewOption.label}}">{{viewOption.label}}</label> 
    <select id="{{viewOption.label}}" 
     class="form-control" 
     ng-model="vm.config[viewOption.label]" 
     ng-options="v as k for (k,v) in viewOption.values" 
     ng-change="vm.optionChange(viewOption.label);"></select> 
    </div> 
    <div class="form-group col-md-12" 
     ng-repeat="viewOption in vm.viewerOptions"> 
    <label for="{{viewOption.label}}">{{viewOption.label}}</label> 
    <select id="{{viewOption.label}}" 
     class="form-control" 
     ng-model="vm.config[viewOption.label]" 
     ng-options="value for value in viewOption.values" 
     ng-change="vm.optionChange(viewOption.label);"></select> 
    </div> 
</div> 

そして最後にクラスのコントローラに、私はちょうどそれにテンプレートのURLを持つこのオブジェクトがあります。

vm.popover = { 
    template: '<a href uib-popover-template="\'options-panel.html\'" popover-placement="left"></a>' 
}; 

私は何が欠けているのかは分かりませんが、ポップオーバーでさえ私のテンプレートが入っているものは表示されません。私がちょうどuib-popover="test"で省略記号(faアイコン)を行うならば、popoverはそれに 'test'と表示されるので、uib依存関係が正しくインストールされています。

答えて

-1

このライン

uib-popover-template="'options-panel.html'" 

私は単一引用符を削除

uib-popover-template="options-panel.html" 

お知らせすべきであり、uib-popover-templateはあなたの$scope上のテンプレートの場所に評価する式を受け入れます。テンプレートパスを一重引用符で渡すことで、単純な文字列を式として渡すだけです。

UIB-ポップオーバー・テンプレート

Docsから - 「ポップオーバーボディ

+0

必要はありませんが、私はちょうど同じような問題に遭遇し、単一引用符なしで、ポップオーバーが動作しませんでした。一重引用符で実際に動作します。 –

0

のために使用するテンプレートの場所を表すURLは、私はドンこれuib-popover-template plunker

考えてみましょうあなたのデータ構造はわかっていますが、うまくいくはずです。

あなたは別のバージョンを使用していた場合、私はわからないんだけど、もう

vm.popover = { 
    template: '<a href uib-popover-template="\'options-panel.html\'" popover-placement="left"></a>' 
}; 
+0

詳細なコードと説明を追加できますか –

関連する問題