数据未从指令传递到模板

Question

虽然我已将一个数组列表附加到我的$rootScope，但我可以在控制台中打印出来;它没有传递到我的html模板

指令

   (function () {
        'use strict';
        angular
            .module('app')
            .directive('navigation', navigation);

        navigation.$inject = ['$rootScope', '$timeout', '$state', 'navService'];

        function navigation($rootScope,$timeout, $state, navService) {

            var state;

            $rootScope.nav = navService.nav;
            //I can see the list of Arrays here
            console.log($rootScope.nav);

            return {
                restrict: 'AE',
                replace: 'true',
                scope: { state: '='},
                templateUrl: '/layout/navigation/nav.html'
            };

        };
    })();

Nav.html ：{{nav}}返回空

<header class="navbar navbar-default navbar-fixed-top" id="top" role="banner">
    <div class="navbar-header">
        <button aria-controls="bs-navbar" aria-expanded="false" class="navbar-toggle collapsed" 
        data-target="#bs-navbar" data-toggle="collapse" type="button"><span class="sr-only">Toggle navigation</span> 
        <span class="icon-bar"></span> <span class="icon-bar"></span> 
        <span class="icon-bar"></span></button>
        <a class="navbar-brand" href="../">OrderGator</a>
    </div>
    <nav class="collapse navbar-collapse" id="bs-navbar">
        <ul class="nav navbar-nav">
            <!-- NOT SHOWING HERE -->
            <li ng-repeat="item in nav"  ui-sref-active="active">
                <a ui-sref="{{item.alias}}">
                    {{item.name}}
                </a>
            </li>
        </ul>
        <ul class="nav navbar-nav navbar-right">

            <li ui-sref-active="active" ng-hide="state.restrict">
                <a ui-sref="/auth/login">Sign In</a></li>
            <li ui-sref-active="active" ng-hide="state.restrict">
                <a ui-sref="/auth/register" class="boxed">Request Demo</a>
            </li>
            <li ui-sref-active="active" ng-show="state.restrict">
                <a ui-sref="settings">Settings</a>
            </li>
            <li ui-sref-active="active" ng-show="state.restrict">
                <a ui-sref="/auth/logout">Sign out</a>
            </li>
            <li ui-sref-active="active" ng-show="state.restrict">
                <a ui-sref="support" class="boxed">Support</a>
            </li>

        </ul>
    </nav>

</header>

nav.Service.js

(function () {
    'use strict';
    angular
        .module('app')
        .service('navService', navService);

    function navService($http) {


        var navService = {
            nav: nav()
        };

        return navService;

        function nav() {

            return nav = 
            [{
                "name": "Overview",
                "alias": "overview",
                "content": {
                    "title": "title."
                },
                "restrict":"false"
            }, {
                "name": "Features",
                "alias": "features",
                "content": {
                    "title": "title."
                },
                "restrict":"false"
            }, {
                "name": "Success Stories",
                "alias": "success-stories",
                "content": {
                    "title": "title."
                },
                "restrict":"false"
            }, {
                "name": "Resources",
                "alias": "resources",
                "content": {
                    "title": "title."
                },
                "restrict":"false"
            }, {
                "name": "FAQ",
                "alias": "faq",
                "content": {
                    "title": "title."
                },
                "restrict":"false"
            }, {
                "name": "Get Started",
                "alias": "get-started",
                "content": {
                    "title": "title."
                },
                "restrict":"false"
            }, {
                "name": "Dashboard",
                "alias": "dashboard",
                "content": {
                    "title": "title."
                },
                "restrict":"true"
            }, {
                "name": "Orders",
                "alias": "orders",
                "content": {
                    "title": "title."
                },
                "restrict":"true"
            }, {
                "name": "Products",
                "alias": "products",
                "content": {
                    "title": "title."
                },
                "restrict":"true"
            }, {
                "name": "Transactions",
                "alias": "transactions",
                "content": {
                    "title": "title."
                },
                "restrict":"true"
            }, {
                "name": "Companies",
                "alias": "companies",
                "content": {
                    "title": "title."
                },
                "restrict":"true"
            }];

        };

    };
})();

Answer 1

使用指令scope代替$rootScope

您的指令具有孤立的范围，因此在模板中看不到全局$rootScope。

   function navigation($timeout, $state, navService) {
        return {
            restrict: 'AE',
            replace: 'true',
            scope: { state: '='},
            link: function(scope){
                scope.nav = navService.nav;
            }
            templateUrl: '/layout/navigation/nav.html'
        };
    };