Question

我在线找到了一个漂亮的悬停菜单实现。它适用于分配hrefs。我想将它转换为使用ui.router状态和sref。

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

它生成并编译html的地方我将{{node.href}}更改为＆＃34; {{$ state.href（node.sref）}}＆＃34;

但是输出产生了＆＃34; {{$ state.href（node.sref）}}＆＃34;就像我写的那样出现，它没有评估。

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

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

我的最终目标是这样的： {{node.href？ node.href：$ state.href（node.sref）}}

并且如果node.href是真的，它可以工作，但是如果href是未编译的，那么表达式会显示未定义...所以我知道它正在尝试评估该表达式...我将它转换为＆＃34; $ state.href（node.sref）＆＃34;简化它......

还有办法查看$ 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>标记）绑定到状态的指令。如果状态具有关联的URL，则该指令将自动生成＆amp;通过$ state.href（）方法更新href属性。

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创建指向该状态的链接，请执行以下操作：

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

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

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

我在上面发布的链接中清楚地解释了这一点。

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

1 个答案: