範囲のテキストの代わりにHTMLページです。anglejs

Question

Angularjsを初めて使っています。私はangularJSのタブを使い始めています。私がAngularJS-UI-Bootstrapのウェブページから直接取り上げた例です。 私の最終目標は、単純なテキストではなく、タブ内にダイナミックHTMLコンテンツを追加することです。私はどのようにアプローチすべきですか？ 私のHTMLは、この

<div ng-controller="chatsController"> 
    <h1> Anguchat </h1> 
    <hr/> 
    <uib-tabset active="active"> 
     <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled"> 
      {{tab.content}} 
     </uib-tab> 
    </uib-tabset> 
</div> 

のように見え、私の角度コントローラは、次のようになります。

angular.module('anguchat', ['ui.bootstrap']); 
angular.module('anguchat').controller('chatsController', function ($scope, $window) { 

    $scope.tabs = [ 
    { title:'Room1', content:'I want to add html here' }, 
    { title:'Room2', content:'Dynamic content 2' } 
    ]; 

}); 

Answer 1

DOMにHTMLテンプレートを追加するためにng-includeを使用することはでき

<uib-tabset active="active"> 
    <uib-tab index="$index + 1" ng-repeat="tab in tabs" heading="{{tab.title}}" disable="tab.disabled"> 
     <div ng-include="tab.content"> 
     </div> 
    </uib-tab> 
</uib-tabset> 


$scope.tabs = [ 
    { title:'Room1', content:'template1.html' }, 
    { title:'Room2', content:'template2.html' } 
]; 

Demo