0

我在网上找到了一个不错的悬停菜单实现。它非常适合分配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();
                    }
                }
            };
        }]);
4

1 回答 1

2

你不能同时使用ui-sref和href属性。整个想法ui-sref是为您生成href属性。

<a>将链接（标签）绑定到状态的指令。如果状态具有关联的 URL，该指令将通过 $state.href() 方法自动生成和更新 href 属性。

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

评论后编辑。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>

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

于 2015-12-11T16:01:56.320 回答