CODEWITHSUNDEEP
angularjsangular-translate
Mike_Laird
Mike_Laird

Reputation: 1124

angular-translate not working in a button that has another component

angular-translate works fine for several p's, h's, and labels using the format

<p translate>something</p>

Its great. But I can not get it working on buttons that have another Angular component on that button, specifically angular-dropdowns. In fact, when I put translate at the end of the > , it breaks the entire page on page load and no Javascript works. In the Console, I get Error: [$compile:multidir] http://errors.angularjs.org/1.2.20/$compile/multidir (etc., etc.)

The HTML is

<div id="leftOfMap" class="floatingSection" data-ng-controller="languageController">
    <ul>
        <li class="leftOfMapItem"><button id="languageButton" dropdown-menu="ddMenuOptions" dropdown-model="ddMenuSelected" class="btn-menu">Language</button></li>
        <li class="leftOfMapItem" translate>BIKE PATHS</li>
    </ul>
</div>

The Angular controller for that button is

residenceApp.controller('languageController', [ '$scope', 'changeLanguage',
function( $scope, changeLanguage ) {
var languageChoices = [
    {"text": "English", "val": "en"},
    {"text": "Espanol", "val": "es"}
];
$scope.ddMenuOptions = languageChoices;
$scope.ddMenuSelected = {};
$scope.$watch('ddMenuSelected', function(newVal) {
    if (newVal && newVal.text) {
        changeLanguage(newVal.val); //eg., changeLanguage(es);
        //changeLanguage() is the name of a factory service
    }
}, true);
}]);

The dropdown button works, selects languages and translation occurs. myApp has the config stuff that is in angular-translate's docs - $translateProvider.translations() kind of stuff. Again, the problem is that when the translate attribute/instruction is on the button, it breaks the whole page on page load. I tried bringing $translate into the above controller, but could not get it working. What has to change?

Upvotes: 0

Views: 1677

Answers (1)

Chad Robinson
Chad Robinson

Reputation: 4623

Are you using an older version of Angular Translate than the current version on Github? Because if not, that's not the right syntax for it. Use one of the following:

<li class="leftOfMapItem" translate="BIKE PATHS"></li>

or:

<li class="leftOfMapItem">{{ 'BIKE PATHS' | translate }}</li>

Note the quotes around the translation key in the expression.

Upvotes: 2

Related Questions