Data-badge using the $scope value

Page layout & navigation
1

I’m trying to set a dynamic value for data-badge in a mobiscroll-bottom-nav
data-badge="{{badge.journal}}"

where $scope.badge.journal = 3

However the badge is displaying {{badge.journal}} instead of 3. The expression is not evaluated.

Am I doing something wrong?

2

Hi @Dominic,

The data-* attributes are taken into consideration only at initialization time. The problem here is that, when the navigation directive is initialized, the data-badge attribute is not evaluated yet. When using an ng-repeat to generate the navigation items, this initialization is postponed, until the items are rendered. In this case the data-badge attribute is evaluated. However, this also works only the first time. After the initialization if you change the badge value, it won’t be reflected out of the box on the UI.

The solution is to add a watch to the scope value you want to bind, and update the badge value like this:

<ul mobiscroll-bottom-nav mobiscroll-instance="navInstance">
    <li data-id="journal" data-badge="{{badge.journal}}">Journal</li>

In your controller:

$scope.$watch('badge.journal', function(newValue, oldValue) {
    var inst = $scope.navInstance;
    if (inst) {
        inst.setBadge('journal', newValue);
    }
});

Let us know how it goes!

1 Like
3

It is working as expected. Thank you.