我在 Angular Directive 和 Angular Routing 中遇到问题？答案

【问题标题】：I have an issue in Angular Directive and Angular Routing?我在 Angular Directive 和 Angular Routing 中遇到问题？
【发布时间】：2016-03-20 23:42:54
【问题描述】：

文件夹结构如下
资产
…… .img
......字体
......js
....css
数据
......数据.json
部分
......main.html
......contact.html
......demo.html
......业务线.html
......产品.html
指令
......导航.html
索引.html

第一个片段是我的 Angular app.js 文件

第二个片段是我的 index.html

第三个片段是我的 main.html，这是我在加载主页时需要放置的部分，类似于我在我的网站中的其他页面有部分

第四个片段是我的 nav 自定义指令，它放置在所有部分中，因为每个部分在标题中都有不同的 id

第五个sn-p 是我从partials 中获取数据的json 文件
问题是该指令未加载到任何部分 html

var rootCave = angular.module("rootCave", ['ngRoute']);
rootCave.directive('navigation', [

    function() {
        'use strict';
        return {
            restrict: "E",
            templateUrl: 'directives/nav.html'
        };
    }
]);
rootCave.service('aboutService', function($http, $q) {
    "use strict";
    var deferred = $q.defer();
    $http.get('data/data.json').then(function(rcdata) {
        deferred.resolve(rcdata);
    });
    this.getAbout = function() {
        return deferred.promise;
    };
});

rootCave.controller('aboutCtrl', function($scope, aboutService) {
    'use strict';
    var promise = aboutService.getAbout();
    promise.then(function(rcdata) {
        $scope.about = rcdata.data.about;
        $scope.products = rcdata.data.products;
        $scope.mobileProduct = rcdata.data.mobileProduct;
        $scope.clients = rcdata.data.clients;
        $scope.anytime = rcdata.data.anytime;
        $scope.lobProduct = rcdata.data.lobProduct;
        $scope.Product = rcdata.data.lobProduct.projectsdetails;
    });
});




rootCave.config(['$routeProvider',
    function($routeProvider) {
        'use strict';
        $routeProvider.
        when('/main', {
            templateUrl: '/partials/main.html',
            controller: 'MainCtrl'
        })
            .when('/contact', {
                templateUrl: '/partials/contact.html',
                controller: 'ContactCtrl'
            })
            .when('/demo', {
                templateUrl: '/partials/demo.html',
                controller: 'DemoCtrl'
            })
            .when('/line-of-business', {
                templateUrl: '/partials/line-of-business.html',
                controller: 'LOBCtrl'
            })
            .when('/mob-app', {
                templateUrl: '/partials/mob-app.html',
                controller: 'MobAppCtrl'
            })
            .when('/mobile-apps', {
                templateUrl: '/partials/mobile-apps.html',
                controller: 'MobileAppsCtrl'
            })
            .when('/product', {
                templateUrl: '/partials/product.html',
                controller: 'ProductCtrl'
            })
        otherwise({
            redirectTo: '/main'
        })
    }
]);
rootCave.controller('MainCtrl', ['$scope',
    function($scope) {
        'use strict';
    }
]);
rootCave.controller('ContactCtrl', ['$scope',
    function($scope) {
        'use strict';
    }
]);
rootCave.controller('DemoCtrl', ['$scope',
    function($scope) {
        'use strict';
    }
]);
rootCave.controller('LOBCtrl', ['$scope',
    function($scope) {
        'use strict';
    }
]);
rootCave.controller('MobAppCtrl', ['$scope',
    function($scope) {
        'use strict';
    }
]);
rootCave.controller('MobileAppsCtrl', ['$scope',
    function($scope) {
        'use strict';
    }
]);
rootCave.controller('ProductCtrl', ['$scope',
    function($scope) {
        'use strict';
    }
]);

<!DOCTYPE html>
<html lang="en" ng-app="rootCave">


    <head>
        <!-- meta tags -->
        <!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <!-- meta tags -->

        <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
        <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
        <!--[if lt IE 9]>
            <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
            <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
        <![endif]-->

        <!---- title ---->
        <title>RootCave| Software House</title>
        <!---- title ---->

        <!---- syles ---->
        <link rel="stylesheet" href="assets/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="assets/fonts/flaticon/flaticon.css">
        <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
        <link rel="stylesheet" href="assets/css/style.css">
        <link rel="stylesheet" href="assets/css/responsive.css">
        <!---- syles ---->

    </head>
    <body data-ng-controller="aboutCtrl">


<div ng-controller="MainCtrl">
    <div ng-view></div>
</div>

<!-- Footer Start-->
    <footer class="footer">
        <div class="container">
            <div class="row">
                <div class="col-sm-4">
                    <div class="footer-box white">
                        <img class="img-responsive" src="<?php echo $img; ?>Logo_white.png">
                        <ul class="social">
                            <li><a href="https://www.facebook.com/rootcave"><i class="fa fa-facebook"></i></a></li>
                            <li><a href="https://twitter.com/rootcave_team"><i class="fa fa-twitter"></i></a></li>
                            <li><a href="https://www.linkedin.com/company/root-cave"><i class="fa fa-linkedin"></i></a></li>
                            <li><a href="#"><i class="fa fa-google-plus"></i></a></li>
                            <li><a href="#"><i class="fa fa-youtube-play"></i></a></li>
                        </ul>

                        <div class="copy">
                           <br>
                            <p>Copyright @ 2015 - RootCave</p>
                        </div>
                    </div>

                </div>
                <div class="col-sm-4 hidden-xs"></div>
                <div class="col-sm-4">
                    <div class="footer-box white">
                        <h3 class="upper" style="
    margin-left: 45px;" >Reach Us </h3>
                        <ul class="details">
                            <li><i class="fa fa-map-marker"></i>6 Gamal Salem St., from Mosadak St., Dokki, Egypt.</li>
                            <li><i class="fa fa-phone"></i>+(20)100 5399 170</li>
                            <li><i class="fa fa-envelope"></i>info@rootcave.com</li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </footer>
<!-- JavaScript Files -->

    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    <script src="assets/js/jquery-1.11.3.min.js"></script>

    <!-- angular js -->
    <script src="assets/js/angular.min.js"></script>
    <script src="assets/js/angular-route.min.js"></script>
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    <script src="assets/js/bootstrap.min.js"></script>
    <script src="assets/js/typeit.min.js"></script>
    <!-- smoth scroll -->
    <script src="assets/js/SmoothScroll.js"></script>
    <script src="http://maps.googleapis.com/maps/api/js"></script>
    <!-- GOOGLE MAP -->
    <script type="text/javascript">
        // When the window has finished loading create our google map below
        google.maps.event.addDomListener(window, 'load', init);

        function init() {
            // Basic options for a simple Google Map
            // For more options see: https://developers.google.com/maps/documentation/javascript/reference#MapOptions
            var mapOptions = {
                // How zoomed in you want the map to start at (always required)
                zoom: 8,

                // The latitude and longitude to center the map (always required)
                center: new google.maps.LatLng(29.9773051,31.3105241), // New York

                // How you would like to style the map.
                // This is where you would paste any style found on Snazzy Maps.

            };

            // Get the HTML DOM element that will contain your map
            // We are using a div with id="map" seen below in the <body>
            var mapElement = document.getElementById('googleMap');

            // Create the Google Map using our element and options defined above
            var map = new google.maps.Map(mapElement, mapOptions);

            // Let's also add a marker while we're at it
            var marker = new google.maps.Marker({
                position: new google.maps.LatLng(29.9773051,31.3105241),
                map: map,
                title: 'Snazzy!'
            });
        }
    </script>
    <script>
        $(".nav li a").click(function() {
            $('html, body').animate({
                scrollTop: $($.attr(this, 'href')).offset().top
            }, 2000);
        });
    </script>

    <script>
        $(window).load(
            function () {
                $(".loading").fadeOut(2000, function () {
                    $(this).parent().fadeOut(2000);
                });
            }
        );

        /*--
            auto typing plugin
        --*/
        $('.typing').typeIt({
            strings: [
                "Tailored to suit your business ",
                "Cloud based Software for your business",
                "Real time Analytics for data driven business decisions"
            ],
            speed: 150,
            breakLines: false,
            loop: true,
            cursor: false
        });
    </script>

    <!-- JavaScript Files -->
    <script src="assets/js/app.js"></script>
<!-- Footer End-->

    </body>
</html>

<!-- Header Start ---->
<header class="header" id="header">
    <!-- navigation Start -->
<navigation></navigation>
    <!-- navigation End -->
    <div class="p-overlay"></div>
    <div class="container">
        <div class="row">
            <div class="col-sm-5">
                <div class="header-cont">
                    <h2 class="typing" style="color: white;"></h2>
                    <a class="btn btn-primary" href="demo.php">Get Started</a>
                </div>
            </div>

            <div class="col-sm-7">
                <div style="padding:25% 0">
                    <img class="img-responsive" src="assets/img/mockups/responsive1.png">
                </div>
            </div>
        </div>
    </div>
</header>
<!-- Header ---->


<section class="aboutme padding white" id=aboutUs>
    <div class="overlay"></div>
    <div class="container">
        <div class="row">
            <h1 class="text-center">Root Cave at a glance</h1>

            <p class="text-center" style="width:60%; margin: auto;">
                Root Cave delivers a business application suite for small and medium size companies around the world. , our flexible solutions help you accelerate your business growth. That flexibility allows you to choose to implement the suite on your existing servers or move to a modern cloud implementation. Explore these pages to see why we are now the fastest growing business management solution!
            </p>
            <br><br>
        </div>
        <div class="row" ng-repeat="items in about track by $index" ng-if="$index % 2 == 0">
            <div class="col-sm-6"
               ng-repeat="i in [$index, $index + 1]"
               ng-if="about[i]"
              >
                <div class="about-box">
                    <div class="col-xs-3">
                        <i class="{{about[i].icon}}"></i>
                    </div>
                    <div class="col-xs-9">
                        <h3>
                            {{about[i].title}}
                        </h3>
                        <p>
                            {{about[i].description}}
                        </p>
                    </div
                </div>
            </div>
        </div>
    </div>
</section>

<section class="green-l padding">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <div class="l-box">
                    <h3 class="white">Web App</h3>
                    <p class="white">
                        Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.
                        Lorem ipsum dolor sit amet, perfecto accusata ad qui, amet adhuc everti ut pri. Recusabo periculis patrioque an duo. Suas alienum eos at, at nibh soleat nostrud mel. Eu eam alii sanctus sadipscing, eos nusquam voluptaria et, nominati volutpat maiestatis has ei.
                    </p>
                    <a class="btn btn-primary" href="/line-of-business">Get Started</a>
                </div>
            </div>

            <div class="col-sm-6">
                <div class="l-box">
                    <img class="img-responsive" ng-src="assets/img/PcColl.png">
                </div>
            </div>

        </div>
    </div>
</section>

<section class="mobile padding">
    <div class="container">
        <div class="row">
            <div class="col-sm-6">
                <h3>Mobile App</h3>
                <p>
                    Mobile devices are increasingly utilized to access content and interact with brands. So, it is critical that you have a well-designed and solidly executed mobile experience. Root Cave provides clients with brand consistency through and throughout customized mobile websites and applications.
                </p>
                <a href="/mobile-apps" class="btn btn-primary">Get Started</a>
            </div>

            <div class="col-sm-6">
            </div>
        </div>
    </div>
</section>

<section class='clients padding text-center' id="customers">
    <div class="container">
        <div class="row" >
       <!-- <h1 class="text-center">Customers</h1> -->
        </div>
        <div class="row" ng-repeat="client in clients track by $index" ng-if="$index % 4 == 0">
            <div class="col-sm-3"   ng-repeat="i in [$index,$index +1,$index + 2 , $index + 3]" 
               ng-if="clients[i]">
                <img class="img-responsive" ng-src="assets/img/clients/{{clients[i].clientLogo}} " >
            </div>


        </div>
    </div>
</section>

<!-- navigation Start -->
<nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
                <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="#">
                <img alt="Brand" src="assets/img/Logo.png">
            </a>
        </div>

        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav navbar-right">
                <li><a href="#/main">home</a></li>
                <li><a href="#aboutUs">about us</a></li>
            <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Products <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#/line-of-business">Line Of Business App</a></li>
            <li><a href="#/mobile-apps">Mobile App</a></li>

          </ul>
        </li>

                <li><a href="#customers">customers</a></li>
                <li><a href="#/contact">contact us</a></li>
                <li class="hidden-md hidden-sm hidden-xs" style="font-size: 35px;color:#696969;margin-top: 15px;">|</li>
                <li><a href="#/demo" class="btn btn-primary">Demo</a></li>
            </ul>
        </div><!-- /.navbar-collapse -->
    </div><!-- /.container-fluid -->
</nav>
<!-- navigation End -->

【问题讨论】：

这是一个大量的代码。乍一看，您会遇到语法错误，例如“use stric”和“use script”。您能否将其归结为一个小而简单的示例来展示您遇到的问题？如果你能做到，你更有可能得到答案。
问题寻求调试帮助（“为什么这段代码不起作用？”）必须包括所需的行为、特定问题或错误以及重现它所需的最短代码在问题本身。没有明确问题陈述的问题对其他读者没有用处。见：How to create a Minimal, Complete, and Verifiable example.

标签： javascript angularjs json angularjs-directive angular-ui-router

【解决方案1】：

是否可以像将指令限制为属性一样简单：

rootCave.directive('navigation', [

    function() {
        'use strict';
        return {
            restrict: "A", <-- here you are restricting your directive to attribute
            templateUrl: 'directives/nav.html'
        };
    }
]);

而你正在使用它作为一个元素：

<!-- navigation Start -->
    <navigation></navigation> <-- here you are using it as an element
<!-- navigation End -->

【讨论】：

谢谢 lex 但复制时出错了，它是 E 并且仍然无法正常工作