CODEWITHSUNDEEP
angularjsangular-ui-bootstrap
coder
coder

Reputation: 95

Angular bootstrap tabs- refreshing a tab with a new html

I am using tabs of angular bootstrap ui. I have overriden the tabs directive so as to perform lazy loading of data Plunkr link for the same : http://plnkr.co/edit/VABthzUwp50QpS16Gwuy?p=preview

The lazy loading works perfectly fine.I have a requirement where in the tab should get reloaded with a different html on clicking of a button.

For ex, say I have a tab which renders tab1.htm. This tab1.htm has a button on click of that button I want to render a different html in the same tab.

I tried changing the template-url of the div for tab1,however I am not able to reload the current tab with the new url

Upvotes: 0

Views: 855

Answers (2)

Andrew
Andrew

Reputation: 995

It sounds like you want an option for one of the tabs to present "conditional data".

There is a very simple way to set this up using an ng-view + template as the container for your tab.

First set up a basic ng-view as such: 

<div ng-view></div>

Than connect it via your app config...

$routeProvider.
      when('/tab2', {
        templateUrl: 'templates/tab2.html',
        controller: 'tab2'
    }).

Finally, you need to add a "conditional load" to the route provider. The link syntax will be site/module?conditional (or whatever you want with the question mark).

See the documentation here and search for $location.search(). Simple link the button to the conditional url which represents the conditional data for your tab.

https://docs.angularjs.org/api/ng/service/$location

Note: Once you have retrieved the conditional url with $location.search()[""], just concatenate it to a url string 

templateUrl: 'templates/tab2' + searchObject["v"] +'.html',

in order to route correctly. If no conditional statement is presented, the url will route to the default template or html file as it usually does.

tl;dr: 1) Create a config file with $routeProvider setup 2) Create a conditional link to a template with your tab's data. 3) Link your button to that link

Upvotes: 0

domokun
domokun

Reputation: 3003

Your Plunkr use a strongly outdated version of Angular, which doesn't support the new $sce service to be used with ng-bind-html

Also, it ha some serious issues with CSS that I'm not gonna fix, so I will point you in the right direction instead.

In this answer (How can I make my HTML model data display in a <textarea> as it would in a browser?) you can find how to "inject" HTML into your page using a modern AngularJS version (1.2.0 or higher).

Working Plunker: http://plnkr.co/edit/ld4Nte2KKIbgMkIWnRcP

If you really want to stick with 1.0.8, you will have to use ng-bind-html-unsafe which is pretty straight-forward:

<div ng-bind-html-unsafe="{{html_code}}"></div>

And in some controller:

$scope.html_code = "<h1>Some fancy HTML code</h1>"

Upvotes: 0

Related Questions