How to re-render views using Angular JS

Question

I want to re-render all the views present on my page.I have Header, Footer and Body view. In Header view i have a dropDown in which user can select the Language Preference. On clicking on language prefrence all the view should be re-render. Is it Possible in Angular?

In BackboneJs i simply call the render function again on that particular event. Is there some same kind of functionality provided by AngularJs?

Thanks in Advance

Header Template (language Prefrence Dropdown Code)

<li class="dropdown">
    <a id="dLabel" role="button" data-toggle="dropdown" data-target="#">
        Language Preferences<b class="caret"></b>
    </a>
    <ul class="dropdown-menu dropdown-manual">

        <li id="English" ng-click="englishConversion()">English</li>
        <li id="French"  ng-click="frenchConversion()" >French</li>

    </ul>
</li>

is there any inbuilt function which i can call in englishConversion and frenchConversion to re-render the view/views?

Do you inject the texts into the view by using scope variables? — Yoshi
– Yoshi, Commented Mar 6, 2014 at 8:20
yes. i injected the template in the directive. My code Look like this 'angular.module('mycomponent', []) .directive('headernav', function() { return { restrict: 'E', scope: { }, controller: function($scope, $element) { }, templateUrl:'/static/tmpl/headernav.html', replace: true }; })' — nitansh bareja
– nitansh bareja, Commented Mar 6, 2014 at 8:23
Then I think re-rendering is the wrong approach (especially with angular). Just have localized strings in the scope and switch a language marker. The rest will be done by angular. I'll add an answer shortly. — Yoshi
– Yoshi, Commented Mar 6, 2014 at 8:24
Because I don't think that's the right way to handle such stuff in angular. The view is constantly re-renderd on data-change (two-way-data-binding). So there is seldom, or rather, there should seldom be any need to trigger it manually. If you handle the data correctly, angular will take care of the rest. — Yoshi
– Yoshi, Commented Mar 6, 2014 at 9:06

Jayantha Lal Sirisena · Accepted Answer · 2014-03-06 07:37:27Z

3

Have you looked at the angular-getText libary ,

Or you can $compile the HTML using angular again. You can simply do like this,

var content=angular.element('#translatedContent');
var scope=content.scope();
$compile(content.contents())(scope));

edited Mar 6, 2014 at 7:37

answered Mar 6, 2014 at 7:09

Jayantha Lal Sirisena

21.4k11 gold badges74 silver badges94 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

nitansh bareja Over a year ago

ok that is for internationalization, But I am using PolyGlotJs for this. Any Idea how to render-views in Angular?

Jayantha Lal Sirisena Over a year ago

How do you translate the content , is it from the server side ?

nitansh bareja Over a year ago

No it is on client side.we just wrap the string values in templates inside polyglot.t('String').And we first have to initialize the Polyglot. For more check this link puigcerber.wordpress.com/2013/03/21/…

Jayantha Lal Sirisena Over a year ago

I think you can $compile the HTML again. See my edit

Jayantha Lal Sirisena Over a year ago

Ah ok. Then keep the content as a template. keep the html somewhere hidden and compile that and insert it in to the #content div.

|

Collectives™ on Stack Overflow

How to re-render views using Angular JS

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related