Question

您好，并提前致谢。我正在努力让我的观点显示在我的index.html页面上。我可以在http请求中看到，当我点击我的链接时，正在检索相应的模板，但它没有被显示。这就像将模板html与ng-view标签关联起来一样麻烦。我的模板也只有一个根元素，而其他所有模板似乎都应该正常工作。任何帮助将非常感激。另外，如果我只使用模板而不是templateUrl并以这种方式添加html，那么它也可以。

var app = angular.module('fireground', [ 'ngRoute', 'ngSanitize' ])

        .config(['$routeProvider', function ($routeProvider) {
            $routeProvider
                    .when('/', {
                        templateUrl : 'pages/test.html',
                        controller  : 'RootCtrl'
                    })
                    .when('/one', {
                        templateUrl : 'pages/test2.html',
                        controller  : 'RootCtrl'

                    })
                    .when('/newsletter', {
                        controller  : 'RootCtrl',
                        templateUrl : 'pages/test3.html'
                    });

                    //.otherwise({
                    //  redirectTo: '/one'
                    //});
        }])
.controller('RootCtrl', function($scope){
$scope.messages = "Test Test Test Test Test Test";
})

我的Index.html（精简版）

<!DOCTYPE html>

<head>
<title>TheFireStore App</title> 

<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0,     maximum-scale=1.0, target-densityDpi=device-dpi" />

<link rel="stylesheet" href="./css/jquery.mobile-1.4.2.min.css" />
<link rel="stylesheet" href="./css/style.css" />
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.18/angular.min.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-sanitize.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.18/angular-route.min.js">          </script>
<script type="text/javascript" src="./js/angular/app.js"></script>
<script type="text/javascript" src="./js/angular/factories.js"></script>
<script type="text/javascript" src="./js/angular/directives.js"></script>
<script type="text/javascript" src="./js/angular/services.js"></script>


</head>     
<body data-ng-app="fireground"> 

<div id="slidemenu">

    <ul id="slideUL">

        <li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
        <li><a onclick="$(document).unbind('touchmove');" class="navlnk Left" href="#one" data-transition="slide">FIREGROUND LIVE <span class="floatR">&raquo;</span></a></li>
        <li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
        <li><a href="">DEALS</a>
            <ul style="margin:-15px 0 0 40px;">
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Apparel</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">PPE</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Helmets</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Boots</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Flashlights</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Tools</a></li>
              <li><a onclick="$(document).unbind('touchmove');" class="navlnk Center" href="#products" data-transition="slide">Bags &amp; Packs</a></li>
            </ul>
        </li>
    </ul>
    <ul>
        <li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
        <li><a onclick="$(document).unbind('touchmove');" class="navlnk Right" href="#newsletter" data-transition="slide">NEWSLETTER<span class="floatR">&raquo;</span></a></li>
        <li><img class="doubleLine" src="./images/doublelines.jpg" /></li>
        <li><a href="http://www.thefirestore.com/mobile" rel="external">Shop TheFireStore.com <span class="floatR">&raquo;</span></a></li>
    </ul>

</div>

 <div id="master">

 <div class="header" data-role="header" data-position="fixed">
    <a href="#" class="navlinkstyle" data-slidemenu="#slidemenu" data-slideopen="true" data-corners="false" data-iconpos="notext"><img border="0" src="./images/imageMenu.jpg" /></a>
    <img height="62" style="width:100%" class="imgCenter" src="./images/firegroundLogo.jpg" />
</div>
</div>

    <div ng-view></div>


</body>
</html>

我的简单html模板是：

<h1 style="color:black">The message is:  {{messages}}</h1>

AngularJS templateUrl无法正常工作

0 个答案: