Question

我有一个侧边栏指令，如下所示：

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

用它来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);
                };
            }
        };
    })

我想添加另一个指令“启用”链接，当前状态是它们的状态，我做过这样的事情：

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

问题在于，当我尝试获取“url”属性时，我得到非插值：{{item.url}}，我该如何获取插值？

Answer 1

您可以使用$interpolate服务插入属性：

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

然后评估exp以获取值：

var url = exp(scope);

AngularJS解析插值属性

1 个答案: