How to pass string argument to template using Angular

Question

For the following template:

<h2 class="viewTitle">{{viewTitle | translate}}</h2>

I'm passing sometimes a translatable string, sometimes a variable in scope. If I include the template like this:

<div ng-init="viewTitle = 'translatable.title'" ng-include="'views/templates/view-title.html'"/>

Things work. However, I cannot pass a variable from my scope. How to accomplish both?

Is your controller scope is valid with the template?Is your controller associated with the template? — Ritt
– Ritt, Commented Apr 28, 2015 at 19:34
if you do it from controller then you need to change you template html to <h2 class="viewTitle">{{$parent.viewTitle | translate}}</h2> because ng-include does create a child scope — Pankaj Parkar
– Pankaj Parkar, Commented Apr 28, 2015 at 19:38

Community · Accepted Answer · 2017-05-23 11:51:02Z

1

your main issue is this:

How to set scope property with ng-init?. you are reading a scope attribute with ng-init before angular had time to write it. You cannot access $scope attributes in ng-init. instead set the $scope attributes in your controller (js code).

these are additional issues you will probably encounter:

this will work (see below), but you are probably encountering the typical angular scoping issues, for which there are two possible solutions:

Always follow the dot-rule (https://egghead.io/lessons/angularjs-the-dot), will help you to avoid many scoping issues in our career

or use the "controller as" syntax (http://toddmotto.com/digging-into-angulars-controller-as-syntax/).

template:

<h2 class="viewTitle">{{myScopeAttributeInParentScope | translate}}</h2> data: {{myScopeAttributeInParentScope}}

using with String:

<div ng-init="myScopeAttributeInParentScope=translatable.title'}" ng-include="'views/templates/view-title.html'"/>

using with scope attribute:

<div ng-include="'views/templates/view-title.html'"/>  
parent Scope: {{myScopeAttributeInParentScope}}

edited May 23, 2017 at 11:51

CommunityBot

11 silver badge

answered Apr 28, 2015 at 19:52

Reto

3,1631 gold badge24 silver badges33 bronze badges

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

6 Comments

Pedro Dusso Over a year ago

Thanks for the answer and specially the links. However, the scope attribute still isn't working. Is it trying to find in the translation files an entry with the name of the given attribute maybe?

Reto Over a year ago

just add some debugging code, this will make your life easier (see edited answer above). see also this post, which explains the scoping issue very nicely: stackoverflow.com/a/14146317/2766511

Pedro Dusso Over a year ago

Indeed, they are both empty I supposed, since the output is data: data.viewTitle:

Pedro Dusso Over a year ago

Actually adding the $parent hack mentioned in the post you sent me I can show the translatable strings. The debug for the attribute (with $parent) is data: {} data.viewTitle:

Reto Over a year ago

also add the debugging code in your parent template, only then you see the full truth. I would expect that at the time, when your ng-init is executed, then the $scope.myScopeAttributeInParentScope is still empty, so it will not work. move your ng-init code the the controller.js.

|

Collectives™ on Stack Overflow

How to pass string argument to template using Angular

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