AngularJS $scope

Question

I'm currently building a multilingual AngularJS app. All my data is retrieved from api which returns the correct languages. The problem is. Currently I'm using a $scope for every button, every thing in the app. Is this the best way or is there a way to call this directly from a view.

For example:

{{datakey.get.test}}

Some application specific info:

I get the data once (when loading the app) from the api. As a $http I currently retrieve the data and then for each scope I do this:

For example the select button:

$scope.selectButton = resourceKey.filter(function (item) {
    return item.name === prefix + "select-button"
})[0].value;

Then in the view I call {{selectButton}}

But the problem is. My controller is currently getting spammed with these kinda $scopes.

Can this be done more efficiently?

Patrick · Accepted Answer · 2015-11-02 18:33:51Z

If the keys are all known and retrieved from an API, you can write a directive to do the replacement for you and won't have to clutter your scope. As an exercise, I've left variable arg replacement (e.g the {0} in "You have selected {0} items") unimplemented... In any case, you should avoid a watch when the value is static/doesn't change.

angular.module('myApp', [])

// Mocking these out, assuming they would come from API and be set in
// key: value manner
.value('localeKeys', {
    'datakey.get.test': 'Testing 1',
    'datakey.select-button': 'Select'
})

// Simple lookup
.directive('appTranslate', function (localeKeys) {
    return {
        restrict: 'AE',
        link: function (scope, elem, attrs) {
            var attr = attrs.appTranslate,
            	translated = localeKeys[attr] || attr || '';
            
            elem.html(translated);
        }
    };
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp">
    <h3 app-translate="datakey.get.test"></h3>
    <button type="button" app-translate="datakey.select-button"></button>
</div>

The above sample simply looks up the value provided to the directive in the localeKeys. You would swap these localeKeys with the values you retrieve from your API.

BroiSatse · Accepted Answer · 2015-11-02 18:39:43Z

1

Another option is to use filter instead of directive:

.filter('translate', function (localeKeys) {
    return function(input) {
       return localKeys[input] || 'Missing translation for' + input;
    };
});

# View
{{ 'translation.key' | translate }}

answered Nov 2, 2015 at 18:39

BroiSatse

44.8k8 gold badges63 silver badges89 bronze badges

1 Comment

Patrick Over a year ago

Like it, but should add the one time binding. Filters have had some implication with performance issues, but this should be negligible.

levi · Accepted Answer · 2015-11-02 18:25:05Z

0

Because you are fetching static data(you wont change button names), you can bind your button name in one-way binding avoiding the overhead, just use :: this tells angular that DONT'N put a $watch over that expression to see if there is any change.

{{::datakey.get.test}}

answered Nov 2, 2015 at 18:25

levi

22.8k7 gold badges79 silver badges76 bronze badges

Collectives™ on Stack Overflow

AngularJS $scope

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related