localize in option tag doesnt work - Developing Umbraco 7 packages

Go to solution

Press Ctrl / CMD + C to copy this to your clipboard.

Copied to clipboard

Flag this post as spam?

This post will be reported to the moderators as potential spam to be looked at

Sören Deger 733 posts 2844 karma points c-trib

Jan 03, 2015 @ 16:12

Localize in option tag doesn't work

Developing Umbraco 7 packages

Hi,

the first localize tag for key "mail2cms_protocol" in label works fine. But the next two localize tags in the option tags doesn't work. I get only the default values "IMAP" and "POP3", but I should see the values from en.xml.

<div class="umb-property">
                                <div class="control-group umb-control-group">
                                    <div class="umb-el-wrap">
                                        <label class="control-label" for="">
                                            <localize key="mail2cms_protocol">Protocol</localize>
                                            <small><localize key="mail2cms_protocolDescription"></localize></small>
                                        </label>
                                        <div class="controls controls-row">   
                                            <select ng-model="mailbox.protocol" required>
                                                <option value="imap"> <localize key="mail2cms_imap">IMAP</localize> </option>
                                                <option value="pop3"> <localize key="mail2cms_pop3">POP3</localize> </option>
                                            </select>
                                        </div>
                                    </div>
                                </div>
                            </div>

Has anyone an idea or the same problem?

Umbraco Version 7.1.7.

Cheers
Sören

Copy Link

Sören Deger 733 posts 2844 karma points c-trib

Jan 03, 2015 @ 16:43

0

I have found, that it's not allowed to use any tags within an option tag. Another way is to use the label attribute of option tag.

But how I can localize the value of an attribute from an html tag? Is there a way to do this?

Cheers

Sören

Copy Link

Marcel van Helmont 68 posts 259 karma points c-trib

Jan 05, 2015 @ 21:50

Sören,

I think you must write your only angular directive to set the text of a option something like this.

<select>
    <option localize-option="temp"></option>
</select>


angular.module("umbraco.directives").directive('localizeOption', function(localizationService) {
      return {
        restrict: 'A',
        link: function($scope, element, attrs, controller) {
            var key = attrs.localizeOption;

            localizationService.localize(key).then(function(value){
                element.text(value);
            });
        }
      };
    }
  );

Copy Link

Sören Deger 733 posts 2844 karma points c-trib

Jan 06, 2015 @ 06:14

0

Hi Marcel,

great :-) This works! Thank you!

Copy Link
Bjarne Fyrstenborg 1280 posts 3990 karma points MVP 7x c-trib

Feb 28, 2015 @ 17:07
2
@Marcel first I tried with your approach, which work great. But there is already a built-in directive in the core that you can use.

There is a directive for <umb-control-group> here https://github.com/umbraco/Umbraco-CMS/blob/5b9a98ad6ae9e63322c26f7b162204e34f7fcb54/src/Umbraco.Web.UI.Client/src/common/directives/html/umbcontrolgroup.directive.js

and then utility element and attribute directive here: https://github.com/umbraco/Umbraco-CMS/blob/5b9a98ad6ae9e63322c26f7b162204e34f7fcb54/src/Umbraco.Web.UI.Client/src/common/directives/util/localize.directive.js

if <umb-control-group> element you can localize in like this:
```
<umb-control-group ng-hide="hasAuthd()" label="@analytics_authorisation" description="@analytics_loginWithGoogleViaOAuth">
<button class="btn btn-success" ng-click="auth()"><span class="icon-lock"></span> 
<localize key="analytics_authorize">Authorize</localize></button> 
</umb-control-group> 
```
For a <select> element with options the <localize> element directive doesn't work inside it, so you can use localize attribute directive:

e.g. like this:
```
<option value="" localize="label" label="@analytics_selectAnAccount"></option>
```
or it could be the placeholder attribute on a textbox you want to localize:
```
<input type="text" localize="placeholder" placeholder="@area_key"> 
```
/Bjarne
Copy Link
Jan Wytze Zuidema 1 post 71 karma points

Apr 23, 2018 @ 08:30

0

Using label in an option tag doesn't seem to work in Firefox :(

Copy Link
is working on a reply...

Please Sign in or register to post replies