如何使用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?

Answer 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}}