Question

我刚开始使用Express Framework上的angularjs，我正在尝试将html页面加载为包含。现在我已经设置了我的路由角度并且工作正常，但是当我尝试在我的html页面中使用ng-include时，它有点循环并且给出以下错误：

Uncaught Error: [$rootScope:infdig] http://errors.angularjs.org/1.6.3/$rootScope/infdig?p0=10&p1=%5B%5B%7B%22ms…Be()%3Breturn%20d(a)%7D%22%2C%22newVal%22%3A%22nav-mobile.html%22%7D%5D%5D
at angular.js:38
at m.$digest (angular.js:18048)
at angular.js:18211
at e (angular.js:6274)
at angular.js:6554

现在我正试图将nav-bar-mobile.html包含在页面中，但是我没有让它正常工作。有人有想法吗？

我的路由如下：

var app = angular.module("myApp", ["ngRoute", "ngAnimate"]);

/* ROUTING */

app.config(function($routeProvider,$locationProvider) {
    $routeProvider
    
            .when('/', {
                templateUrl: 'partials/home.html',
                controller: 'homeController'
            })
            
            .when('/wie', {
                templateUrl: 'partials/wie.html',
                controller: 'aboutController'
            })
                
            .when('/portfolio', {
                templateUrl: 'partials/portfolio.html',
                controller: 'portfolioController'
            })
                
            .when('/channel', {
                templateUrl: 'partials/channel.html',
                controller: 'channelController'
            })
                
            .when('/contact', {
                templateUrl: 'partials/contact.html',
                controller: 'contactController'
            });
              
        $locationProvider.html5Mode(true);
    });
    
/* CONTROLLERS */

app.controller('homeController', function($scope) {
   $scope.pageClass = 'home'; 
});

app.controller('aboutController', function($scope) {
   $scope.pageClass = 'wie'; 
});

app.controller('portfolioController', function($scope) {
   $scope.pageClass = 'portfolio'; 
});

app.controller('channelController', function($scope) {
   $scope.pageClass = 'channel'; 
});

app.controller('contactController', function($scope) {
   $scope.pageClass = 'contact'; 
});

我的index.html页面如下所示：

<!DOCTYPE html>

<html ng-app="myApp" ng-init="CompanyName='MyApp'">
  <head>
    <title>My App</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <!-- CSS  -->
    <!-- load bootstrap & font awesome -->
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel='stylesheet' href='/stylesheets/style.css'>
    <link rel='stylesheet' href='/stylesheets/mobile.css'>
    <link rel='stylesheet' href='/stylesheets/font-awesome.css'>
    
    <!-- JS  -->
    <!-- load angular, ngRoute, ngAnimate  -->
    <script src='https://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular.min.js'></script>
    <script src='//ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-route.js'></script>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.3/angular-animate.js"></script>
    <script src='/javascripts/app.js'></script>
    <base  href="/">
  </head>
  
  <body>
    
    <div class="container">
      <div class="logo">
      <div class="wrap">
          <a href="/"><img src="/images/my-logo.png" alt="my-logo" /></a>
      </div>
      </div>

        <div ng-include="'nav-bar-mobile.html'"></div>

        <div class="box panels tinted">
            <div class="page {{ pageClass }}" ng-view></div>
        </div>
        <div class="nav-bar desktop">
          <div class="inner">
            <ul>
                <li><a href="/">Home</a></li>
                <li><a href="/wie">Wie zijn wij?</a></li>
                <li><a href="/portfolio">Portfolio</a></li>
                <li><a href="/channel">My Channel</a></li>
                <li><a href="/contact">Contact</a></li>
            </ul>
          </div>
        </div>
    </div>
  </body>

</html>

Answer 1

如果HTML页面不在同一文件夹中，则需要提供HTML页面的完整路径。

如何使用Angular ng-include

1 个答案: