AngularJs password meter for bilingual application

Question

I am using ng-password-meter for determining the password strength at the time of login. Now my project is bilingual (works in English and Swedish). I want the messages like "strong" and "weak" to show in Swedish also. Is there any way I can make manipulations to the ng-password-meter tool so that it works in Sweden as well. If not, then is there any other angularjs tool which works for 2 languages? If not this too, then please help me into how should I custom make it. Any help would be appreciated.

Answer 1

This should get you going:

1) Update the template line to replace {{message}} with {{displayMessage()}}

template: '<div class="pass-meter {{masterClass}}"><div class="{{colClass}} pass-meter-col {{first}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{second}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{third}}"><div class="indicator"></div></div><div class="{{colClass}} pass-meter-col {{fourth}}"><div class="indicator"></div></div><div class="pass-meter-message">{{displayMessage()}}</div></div>',

2) Update the scope to include a translateFilter binding

scope: {
    password: '=',
    strength: '=?',
    translateFilter: '<?'
},

3) Add a controller with the appropriate displayMessage function:

controller: ['$scope','$filter', function($scope, $filter){
    $scope.displayMessage = function() {
         return (!!$scope.translateFilter) 
              ? $filter($scope.translateFilter)($scope.message)
              : $scope.message;
    };
}],

4) Pass your translate filter into the directive:

app.filter('customTranslate', function(){
    return function(value) {
        return value + 'tada';
    }
});

<ng-password-meter password="password" translate-filter="'customTranslate'"></ng-password-meter>