转换 angularjs 菜单指令以支持 ui.router

Question

我在网上找到了一个不错的悬停菜单实现。它非常适合分配 href。我想将其转换为使用 ui.router 状态和 sref。

我在菜单数据对象上添加了 href 和 sref 值。

在生成和编译 html 的地方，我将 {{node.href}} 更改为“{{ $state.href(node.sref)}}”

但是生成“{{ $state.href(node.sref)}}”的输出与我写的一样，它没有求值。

这是因为在那个上下文中 $state 没有定义吗？如果是，我该如何定义它？

如果不是，你能告诉我为什么它没有评估吗？

我的最终目标是这样的： {{node.href ？ node.href : $state.href(node.sref)}}

如果 node.href 是真实的，它就可以工作，但是如果 href 是未编译的，则表达式显示为未定义...所以我知道它正在尝试评估该表达式...我将其转换为“ $state.href(node.sref)" 来简化它...

还有没有办法查看 $compile 期间生成的错误？

非常感谢任何帮助，我是 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 directive that binds a link (<a> tag) to a state. If the state has an associated URL, the directive will automatically generate & update the href attribute via the $state.href() method.

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

评论后编辑。 ui-sref 需要一个州名作为值，而不是 URL。假设您处于以下状态：

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

如果您想使用 ui-sref 为该状态创建一个 link，请执行以下操作：

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

ui-sref 指令将对您的 a 标签执行以下操作：

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

我上面的link都解释的很清楚了。

转换 angularjs 菜单指令以支持 ui.router

Converting angularjs menu directives to support ui.router

angularjs

angularjs-directive

angular-ui-router

angularjs-compile