2014-06-18 4 views
0

최초의 HTML 콘텐츠를 변수에 나는 ui.routing부트 스트랩 탭은 각

내가 템플릿이

및 사용이 나는

$scope.trustHtml = function(page) { 
    return $sce.trustAsHtml(page); 
} 

을하지만 page이 보여 안에 내가 원하는 컨트롤러에서

<div ng-bind-html="trustHtml(page)"></div> 

부트 스트랩 마크 업 탭.

var page = '<ul class="nav nav-tabs">' + 
    '<li class="active"><a href="#t1" data-toggle="tab">T1</a></li>' + 
    '<li><a href="#t2" data-toggle="tab">T2</a></li>' + 
'</ul>' + 
'<div class="tab-content">' + 
    '<div class="tab-pane active" id="t1">Tab 1</div>' + 
    '<div class="tab-pane" id="t2">Tab 2</div>' + 
'</div>'; 

그러나 이러한 탭은 탭 탐색에 href="#tab1"을 사용합니다. 그래서 나는 클릭 할 때 단순히 탐색을 변경합니다.

HTML 텍스트 변수 안에 탭을 사용하려면 어떻게해야합니까?

이것은 JSFIddle (http://jsfiddle.net/Serhioromano/qkpFb/) 입니다.하지만 이는 라우팅이 필요하지 않기 때문에 작동합니다. 이는 어떻게 작동 하는지를 보여줍니다. 하지만 실제 코드에서 탭을 클릭하면 탭 전환 대신 작동합니다.

답변

0

관심있는 사람이 있다면이 방법으로 문제를 해결할 수 있습니다.

나는

<div ng-if="page" ng-include="load(page)"></div> 

<div ng-bind-html="trustHtml(page)"></div> 

을 변경 내가 $http으로로드 및 HTML 콘텐츠로 삽입되기 전에 나는

$scope.page = 'MyPage.html'; 
$scope.load = function(page) { 
    return '/structure/html_pages/' + page; 
} 

때문에로드합니다. 이제는 모든 것이 처리되고 어떤 각도의 물건도 사용할 수 있습니다.

관련 문제