Fatal编程技术网

AngularJS templateUrl不工作

angularjs

AngularJS templateUrl不工作,angularjs,ng-view,Angularjs,Ng View,您好，提前谢谢。我正在努力让我的视图显示在index.html页面上。当点击我的链接时，我可以在http请求中看到相应的模板正在被检索，但它只是没有被显示。就好像它在将我的模板html与ng视图标记关联时遇到了问题。我的模板也只有一个根元素，所有其他元素似乎都正常工作。任何帮助都将不胜感激。另外，如果我只是使用模板而不是templateUrl，并以这种方式添加html，它也会工作 var app = angular.module('fireground', [ 'ngRoute', 'ngSan

您好，提前谢谢。我正在努力让我的视图显示在index.html页面上。当点击我的链接时，我可以在http请求中看到相应的模板正在被检索，但它只是没有被显示。就好像它在将我的模板html与ng视图标记关联时遇到了问题。我的模板也只有一个根元素，所有其他元素似乎都正常工作。任何帮助都将不胜感激。另外，如果我只是使用模板而不是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.htmlslimmed

<!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>
ngview标记在哪里？您是否检查了对加载模板的AJAX请求的响应是否成功，以及是否包含适当的HTML代码？应用程序中是否定义了RootCtrl控制器？它是否由index.html页面加载？尝试创建一个plnkr来重现问题。index.html页面上存在ng-view标记。RootCtrl还有一个非常简单的静态作用域消息要显示，AJAX请求确实包含了相应的html代码，但它似乎从未包含在index.html页面中。现在正在处理一个JSFIDLE示例。能否提供index.html的一个片段