My Sidebar directive has the following structure:
<div id="sidebar-wrapper">
<ul class="sidebar">
<li class="sidebar-main">
<a ng-click="toggle()">
{{currentState.stateTitle}}
<span ng-model="currentState.data.stateTitle"></span>
<span class="menu-icon glyphicon glyphicon-transfer"></span>
</a>
</li>
<!--<li class="sidebar-title"><span>NAVIGATION</span></li>-->
<li ng-repeat="item in menu.items" class="sidebar-list">
<a activable ui-sref="{{item.url}}">{{item.title}}<span
class="menu-icon fa {{item.icon}}"></span></a>
</li>
</ul>
</div>
The JavaScript associated with this directive looks like this:
angular.module('common.directives.sidebar', [
'ui.bootstrap',
'common.services.navigation'
])
.directive('sidebar', function ($rootScope, $timeout) {
return {
restrict: 'E',
scope: {
id: '=',
onToggle: '&',
isLocked: '@?'
},
templateUrl: 'directives/sidebar/sidebar.tpl.html',
controller: function ($scope, navigation) {
$scope.currentState = navigation.getCurrentState();
$scope.menu = navigation.getMenu();
$scope.toggle = function () {
$scope.onToggle();
$timeout(function onAnimationDone() {
$rootScope.$broadcast('sidebar:resize');
}, 400);
};
}
};
})
I am now trying to implement another directive that activates links when their current state matches the link's state. Here is what I have so far:
.directive('activable', [function () {
return {
restrict: 'A',
link: function (scope, element, attributes) {
var state = element[0].getAttribute('ui-sref');
scope.$on('$stateChangeSuccess', function (event, toState, toParams, fromState, fromParams) {
if (~toState.name.indexOf(state)) {
element.addClass('active');
} else {
element.removeClass('active');
}
});
}
};
}])
However, I am facing an issue where I cannot retrieve the interpolated value of the "url" attribute. Instead, I receive the non-interpolated value: {{item.url}}. How can I access the interpolated value instead?