My Angular service is responsible for managing all the UI tabs in my application. It holds an object that contains essential information about each tab, such as icons, labels, URLs, and more. I'm facing a scenario where I need to display a dynamic counter on one of the tabs, but I'm struggling to make it work.
This is a snippet of the service:
angular.module('app.services').service('tabService', function($rootScope, $route, $location) {
var tabs = {
"/front": {
"search": {
label: "Search",
url: "/search",
classIcon: "fa fa-search",
urlMatchAddt: ['/searchResults','/productDetails']
},
"order": {
label: "Order",
url: "/cart",
classIcon: "fa fa-shopping-bag"
} ....
Here's the HTML Code in index.html (where tabService is injected into my BaseCtrl controller):
<body ng-app="app" ng-controller="BaseCtrl">
...
<li ng-repeat="t in tabService.getTabs()" ng-class="{active: tabService.isActiveTab(t.url)}" ng-cloak>
<a href="#{{t.url}}"><i class="{{t.classIcon}}" aria-hidden="true" ng-bind-html=""></i> <span ng-bind-html="t.label | trustHTML"></span></a>
</li>
....
</body>
Essentially, what I'm trying to achieve is to have something like this in the label field of my tab:
label: "Order - {{counter}}"
Whenever the {{counter}} variable updates, I want the label to reflect this change dynamically. Since the label might contain HTML code, I'm using the ng-bind-html directive.
Currently, I'm employing a not-so-ideal $watch on the variable. When it changes, I manually replace the label value with a new string that includes the updated value.
I've attempted to use $compile, but faced limitations due to being unable to utilize it with $rootScope or pass in $scope to my service. I'm uncertain about the most effective solution in this situation.
Any suggestions?
Using AngularJS version: 1.6