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
Post a Comment