2016-05-31 5 views
1

角度UIポップオーバーに動的IDを持つテンプレートを使用できますか?例えば角度UIブートストラップ:動的ポップオーバーテンプレートID

<div ng-repeat="row in data"> 
    <button class="btn" uib-popover-template="'myTemplate_{{row.id}}.html'" popover-trigger="mouseenter">View</button> 
    <script type="text/ng-template" id="myTemplate_{{row.id}}.html"> 
     <strong>Name</strong>: {{row.name}}<br/> 
     <strong>Phone</strong>: {{row.phone}}<br/> 
     <strong>Email</strong>: {{row.email}} 
    </script> 
</div> 

私が代わりにngのテンプレートを使用してのサーバからテンプレート(例えばmyTemplate_1.html)を取得するためにボタンアンギュラ試行をマウスオーバー。

私はこの権利に近づいていますか?そうでない場合、動的HTMLコンテンツをポップオーバーに割り当てる最良の方法は何ですか?

ありがとうございました。

答えて

1

IDは一意である必要があり、uib-popover-templateを通過するデータはすべて解析されます。 id=myTemplate_{{row.id}}のデータが解釈されていません。

このような何か試してみてください:

angular.module('test', []) 
 
    .controller('GreetingController', ['$scope', 
 
    function($scope) { 
 
     $scope.data = [{ 
 
     name: 'John' 
 
     }, { 
 
     name: 'Bill' 
 
     }]; 
 
    } 
 
    ]);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="test" ng-controller="GreetingController"> 
 
    <div ng-repeat="row in data"> 
 
    <button class="btn" uib-popover-template="myTemplate_row.html" popover-trigger="mouseenter">View</button> 
 
    </div> 
 
</div> 
 

 
<script type="text/ng-template" id="myTemplate_row.html"> 
 
    <strong>Name</strong>: {{row.name}} 
 
    <br/> 
 
    <strong>Phone</strong>: {{row.phone}} 
 
    <br/> 
 
    <strong>Email</strong>: {{row.email}} 
 
</script>

私はUIBモジュールを持っていないよう例が動作しませんが、基本は同じであり、表示されるはずです。注。

+1

ありがとうございました。私は全部を笑ってしまった。 – Nick

+0

@ニックそれは笑い起こる。 – Jhecht

+0

テンプレートとトリガー文字列を一重引用符で囲んで、 ' ' – programmer

関連する問題