AngularJS parse interpolated attribute

Question

I have a Sidebar directive that looks like this:

<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>

With it's JS:

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 would like to add another directive that "enable" links when the current state it's their state, I have done something like this:

.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');
                    }
                });
            }
        };
    }])

The problem is that when I try to get the "url" attribute, I get the non interpolated value: {{item.url}}, how can I do to get the interpolated value ?

miensol · Accepted Answer · 2015-05-19 08:41:16Z

1

You can interpolate an attribute with $interpolate service:

var state = element[0].getAttribute('ui-sref');
var exp = $interpolate(state);

And then evaluate the exp to get a value:

var url = exp(scope);

answered May 19, 2015 at 8:41

miensol

41.9k9 gold badges127 silver badges116 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

AngularJS parse interpolated attribute

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related