javascript - Bootstrap Tabs in HTML content variable in angular -



javascript - Bootstrap Tabs in HTML content variable in angular -

first utilize ui.routing

i have template , there

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

in controller have

$scope.trusthtml = function(page) { homecoming $sce.trustashtml(page); }

but want within page show bootstrap markup tabs.

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>';

but tabs uses href="#tab1" tab navigation. when click alter navigation .

how can utilize tabs within html text variables?

this jsfiddle (http://jsfiddle.net/serhioromano/qkpfb/) working because without routing. demonstrate how works. in real code when click tabs routs instead of tab switch.

this how solved issue if interested.

i changed

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

to

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

and load

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

because before loading $http , inserted html content. processed , can utilize angular stuff in it.

javascript angularjs twitter-bootstrap

Comments

Popular posts from this blog

php - Android app custom user registration and login with cookie using facebook sdk -

django - Access session in user model .save() -

php - .htaccess Multiple Rewrite Rules / Prioritizing -