0

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?

Pedro Dusso
  • 2,100
  • 9
  • 34
  • 64
  • Is your controller scope is valid with the template?Is your controller associated with the template? – Ritt Apr 28 '15 at 19:34
  • if you do it from controller then you need to change you template html to `

    {{$parent.viewTitle | translate}}

    ` because ng-include does create a child scope     – Pankaj Parkar Apr 28 '15 at 19:38

1 Answers1

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}}
Community
  • 1
  • 1
Reto
  • 3,107
  • 1
  • 21
  • 33
  • 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? – Pedro Dusso Apr 28 '15 at 20:20
  • 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: http://stackoverflow.com/a/14146317/2766511 – Reto Apr 28 '15 at 20:29
  • Indeed, they are both empty I supposed, since the output is `data: data.viewTitle:` – Pedro Dusso Apr 28 '15 at 20:37
  • 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:` – Pedro Dusso Apr 28 '15 at 20:41
  • 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. – Reto Apr 28 '15 at 20:44
  • In fact, I have to access `$scope.myScopeAttributeInParentScope.property`. I *can* access the ` myScopeAttributeInParentScope` both in the html and in controller, but I *can't* access the property - neither in the HTML, nor in the controller. Is this another scope issue? – Pedro Dusso Apr 28 '15 at 21:16