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 が true の場合は機能しますが、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-srefURL ではなく、状態名を値として期待します。次の状態があるとします。

$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 に答える