Преобразование угловых директив меню для поддержки ui.router

Question

Я нашел приложение для наведения на холм в Интернете. он отлично работает для назначения hrefs. Я хотел преобразовать его для работы с состояниями ui.router и sref.

Я добавил значение href и sref в объект данных меню.

где он генерирует и compliled HTML-I изменения {{}} node.href на "{{$ state.href (node.sref)}}"

но на выходе генерируется на «{{$ состояние .href (node.sref)}} появляется так же, как я его написал, это не оценивает.

Это потому, что в этом контексте $ state не определен? Если да, то как это определить?

Если нет, можете ли вы сказать мне, почему это не оценивает?

Моя конечная цель была примерно такой: {{node.href? node.href: $ state.href (node.sref)}}

и если node.href правдивый, он работает, но если href не скомпилирован, выражение отображается неопределенным ... поэтому я знаю, что он пытается Оцените это выражение ... Я преобразовал его в просто «$ state.href (node.sref)», чтобы упростить его ...

Также есть способ увидеть ошибки, сгенерированные во время компиляции $?

Любая помощь очень ценится, я довольно новичок в Angular, и в моих знаниях много пустот, поэтому, пожалуйста, не стесняйтесь задавать глупые вопросы, чтобы проверить мое базовое понимание проблемы и объяснить небольшими словами :) Мне это, наверное, нужно.

var app = angular.module('defaultApp'); 
app.controller('menuController', ['$scope', '$location', function ($scope, $location) { 
      $scope.breadcrumbs = []; 
      $scope.menu = [ 
       { 
        text: 'HOME', 
        href: '\default.html', 
        children: [ 
         { text: 'Default', href: '\default.html' } 
        ] 
       }, 
       { 
        text: 'start', 
        //href: '\default.html', 
        sref: 'start', 
        children: [ 
         { 
          text: 'search', 
          //href: '/manage-people', 
          sref: 'search', 
          children: [ 
           { text: 'search', sref: 'search' }, 
           { text: 'start', sref: 'start' } 
          ] 
         } 
        ] 
       }, 
       { text: 'MY INFO', href: '/my-info', sref: 'search' } 
      ]; 
    /* Directives */ 
    app.directive('navMenu', ['$parse', '$compile', function ($parse, $compile) { 
      return { 
       restrict: 'C', 
       scope: true, 
       link: function (scope, element, attrs) { 
        scope.selectedNode = null; 
        scope.$watch(attrs.menuData, function (val) { 

         var template = angular.element('<ul id="parentTreeNavigation"><li ng-repeat="node in ' + attrs.menuData + '" ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a ng-href="{{$state.href(node.sref)}}" target="{{node.target}}" >{{node.text}}</a>{{node.click}}<sub-navigation-tree></sub-navigation-tree></li></ul>'); 

         var linkFunction = $compile(template); 
         linkFunction(scope); 
         element.html(null).append(template); 
        }, true); 
       } 
      }; 
     }]) 
     .directive('subNavigationTree', ['$compile', function ($compile) { 
      return { 
       restrict: 'E', 
       scope: true, 
       link: function (scope, element, attrs) { 
        scope.tree = scope.node; 
        if (scope.tree.children && scope.tree.children.length) { 
         var template = angular.element('<ul class="dropdown "><li ng-repeat="node in tree.children" node-id={{node.' + attrs.nodeId + '}} ng-class="{active:node.active && node.active==true, \'has-dropdown\': !!node.children && node.children.length}"><a "{{ $state.href(node.sref)}}" target="{{node.target}}" >{{node.text}}</a><sub-navigation-tree tree="node"></sub-navigation-tree></li></ul>'); 

         var linkFunction = $compile(template); 
         linkFunction(scope); 
         element.replaceWith(template); 
        } 
        else { 
         element.remove(); 
        } 
       } 
      }; 
     }]); 

Answer 1

Вы не можете использовать ui-sref и href атрибуты одновременно. Вся идея ui-sref заключается в том, что для вас создается атрибут href.

Директива, которая связывает ссылку (<a>) в состояние. Если у государства есть связанный URL, директива автоматически генерирует & обновление атрибута href с помощью метода $ state.href().

https://github.com/angular-ui/ui-router/wiki/Quick-Reference#ui-sref

Edit после комментариев. ui-sref ожидает значение statename, а не URL. Пусть говорят, что у вас есть следующее состояние:

$stateProvider.state('myState', { 
    url: '/myUrl', 
    template: '<h1>Foobar</h1>', 
    controller: [ 
       '$scope', 
     function ($scope) { ... } 
    ] 
}); 

Если вы хотите создать ссылку на эту состояние с помощью ui-sref сделать следующее:

<a ui-sref="myState">Link</a> 

директива ui-sref будет делать следующее к a тег:

<a ui-sref="myState" href="/myUrl">Link</a> 

Все объяснено четко в ссылке i, вышедшей выше.