我一直在尝试修复此链接上存在类似堆栈溢出问题的人丢弃的问题：Previous Problem and attempted solutions
我已经在这个地址加载了Github上的完整项目解决方案： Project
问题描述：
当index.html文件通过AngularJS ui路由器的ui-view指令加载位于partials / home.html中的home.html时，预期的显示似乎会因home.html无法访问而导致显示中断需要javascript参考才能正确呈现显示。
详情说明 在我的项目中，我尝试使用AngularJS创建SPA。我的主要登录页面是index.html，它包含用于加载部分视图的ui-view指令。以下是我在index.html中的所有代码。
<!DOCTYPE html>
<html lang="en" ng-app='main'>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- The above 3 meta tags *must* come first in the head; any other head content must come *after* these tags -->
<meta name="format-detection" content="telephone=no"/>
<link rel="icon" href="images/favicon.ico" type="image/x-icon">
<title>Home</title>
<!-- Bootstrap -->
<link href="css/bootstrap.css" rel="stylesheet">
<!-- Links -->
<link rel="stylesheet" href="css/camera.css">
<link rel="stylesheet" href="css/google-map.css">
<link rel="stylesheet" href="css/mailform-sub.css">
<link rel="stylesheet" href="css/search.css">
<script src="bower_components/angular-loader/angular-loader.min.js" type="text/javascript"></script>
<script src="bower_components/angular/angular.min.js" type="text/javascript"></script>
<script src="bower_components/angular-ui-router/release/angular-ui-router.min.js" type="text/javascript"></script>
<script src="js/Angular/Main.js" type="text/javascript"></script>
<script src="bower_components/angular-load/angular-load.min.js" type="text/javascript"></script>
<!--JS-->
<script src="js/jquery.js" type="text/javascript"></script>
<script src="js/jquery-migrate-1.2.1.min.js" type="text/javascript"></script>
<script src="js/rd-smoothscroll.min.js" type="text/javascript"></script>
<script src="js/html5shiv.js" type="text/javascript"></script>
<script src="js/device.min.js" type="text/javascript"></script>
</head>
<body>
<div class="page" >
<!--========================================================
HEADER
=========================================================-->
<header>
<div id="stuck_container" class="stuck_container">
<nav class="navbar navbar-default navbar-static-top ">
<div class="container">
<div class="navbar-header">
<div class="navbar-brand">
<p>Custom <span>Craft</span></p>
</div>
</div>
<ul class="navbar-nav sf-menu navbar-right" data-type="navbar">
<li class="active">
<a href="./">Home</a>
</li>
<li class="dropdown">
<a ui-sref='home'>About</a>
<ul class="dropdown-menu">
<li>
<a href="#">Aliuam congu </a>
</li>
<li>
<a href="#">Ferentum nisl </a>
</li>
<li><a href="#">Mauris accan </a>
<ul class="dropdown-menu">
<li>
<a href="#">Aliuam congu</a>
</li>
<li>
<a href="#">Ferentum nisl</a>
</li>
<li>
<a href="#">Mauris accan </a>
</li>
<li>
<a href="#">Nullavel diam</a>
</li>
</ul>
</li>
<li>
<a href="#">Nullavel diam</a>
</li>
</ul>
</li>
<li>
<a href="index-2.html">Services</a>
</li>
<li>
<a href="index-3.html">Projects</a>
</li>
<li>
<a href="index-4.html">Contacts</a>
</li>
</ul>
</div>
</nav>
</div>
<section class="camera_container">
<div class="jumbotron text-center">
<div class="container">
<p class="head">
</p>
<p class="ins1">
</p>
</div>
</div>
<div id="camera" class="camera_wrap">
<div data-src="images/Home1a.jpg">
<div class="camera_caption fadeIn">
</div>
</div>
<div data-src="images/Home2.jpg">
<div class="camera_caption fadeIn">
</div>
</div>
<div data-src="images/Home3.jpg">
<div class="camera_caption fadeIn">
</div>
</div>
</div>
</section>
</header>
<!--View-->
<div ui-view></div>
<!--========================================================
FOOTER
=========================================================-->
<footer ng-controller="mainController">
<section class="well_foot-1 bg1">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12">
<h4>about us</h4>
<p>
We specialize in new developments and the construction of new homes.
<br/>
We also specialize in alterations, additions and steel constructions.
<br />
<br />
</p>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 clear-md">
<h4>Contact Us</h4>
<div>
<span> <img src="images/Icons/Phone.png" style="width: 25px; height: 25px; padding-right: 5px" alt="Phone"/></span>
+27 72 996 9137
</div>
<div>
<span> <img src="images/Icons/Message Filled.png" style="width: 25px; height: 25px; padding-right: 5px" alt="Message"/> </span>
<a href="#" >Send us a Message</a>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12">
<h4>
Follow us
</h4>
<ul class="link-list">
<li>
<a href="https://www.instagram.com/custom_craft/">
<span>
<img src="images/Icons/Instagram-50.png" style="width: 15px; height: 15px; margin-right: 5px" alt="Custom Craft Instagram"/>
</span>
Instagram
</a>
</li>
<li>
<a href="https://www.facebook.com/customcraftcon">
<span>
<img src="images/Facebook-50.png" style="width: 15px; height: 15px; margin-right: 5px" alt="Custom Craft Facebook"/>
</span>
Facebook
</a>
</li>
</ul>
</div>
</div>
</div>
</section>
<section class="well_foot-2">
<div class="container">
<!-- {%FOOTER_LINK} -->
<div class="row">
<div class="col-md-6 col-xs-12">
<h1>Custom <span style="color:#0531F7">Craft</span> <span style="color: black; font-size: 16px">(Pty) Ltd © {{Year}}</span> </h1>
</div>
<div class="col-md-6 col-xs-12">
<img src="images/Logo.jpg" style="width: 200px ; height: 200px" alt="Custome Craft Logo"/>
</div>
</div>
</section>
</footer>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/tm-scripts.js"></script>
<!-- </script> -->
</body>
</html>
以下代码段显示了配置路由选项的js / Angular / Main.js文件夹中的角度代码。
var app = angular.module("main", ["ui.router", "angularLoad"]);
app.run(function(angularLoad,$rootScope, $urlRouter){
$rootScope.$on("$locationChangeSuccess", function(evt){
});
});
app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise("/home");
$stateProvider.state("home", {
url: "/home",
templateUrl: "partails/home.html"
});
});
app.controller("mainController" , ["$scope",
function($scope){
var year = new Date();
$scope.Year = year.getFullYear();
}]);
接下来是第一次加载index.html时，ui-view加载的局部视图，该视图位于partials / home.html。
<main>
<!--========================================================
CONTENT
=========================================================-->
<section class="well well1">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-6 col-xs-6 wow fadeInLeft" data- wow-delay=".9s">
<img src="images/BigIcon/icon-58111.png" alt="Project Management"/>
<h5 class="ins_r">
Project
Management
</h5>
<p class="txt-light">
With more than a decade of experience in the construction industry
you can rest assured that your construction venture will yield the best
possible outcome for your money. We plan ahead, to avoid disastrous situations
and misfortune, and take responsibility to insure that our projects stays on schedule
and on budget.
</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 wow fadeInLeft" data-wow-delay=".7s">
<img src="images/BigIcon/icon-28433.png" alt="Building Innovation"/>
<h5 class="ins_r">
Building
Innovation
</h5>
<p class="txt-light">
We push our boundaries to get you the best possible outcome. We are an evolving business
that strives on new ideas and the challenges that comes with it. We believe in our customers
visions and we design, plan and build accordingly.
</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 wow fadeInLeft" data-wow-delay=".5s">
<img src="images/BigIcon/icon-79595.png" alt="Design and Implementations"/>
<h5 class="ins_r">
Design
& Implementation
</h5>
<p class="txt-light">
We are well advised from our engineers to ensure coordinated implementation and
show an overall commitment to make design a reality. We continuously revise our
strategies to adapt to the unique challenges faced during execution of each project.
</p>
</div>
<div class="col-md-3 col-sm-6 col-xs-6 wow fadeInLeft" data-wow-delay=".3s">
<img src="images/BigIcon/icon-99769.png" alt="Customer Satisfaction"/>
<h5 class="ins_r">
Customer Satisfaction
</h5>
<p class="txt-light">
The longevity of our company remains with our customer's satisfaction. We know how stressful
a construction project can be and therefore we work hard to secure your investment. We construct
and maintain customer relationships by providing reliable, affordable and ethical services.
</p>
</div>
</div>
</div>
</section>
<section class="well well2 parallax text-center" data- url="images/parallax1.jpg" data-mobile="true"
data-speed="0.6">
<div class="container">
<h2 class="fw-l">
<br/>
</h2>
<p class="white ins1 offs1">
<!--Anticipated white text unused-->
</p>
</div>
</section>
<section class="ang_block bg-primary text-center wow fadeIn" data-wow-duration="1.5s">
<div class="container">
<div class="row">
<div class="col-md-3 col-sm-3 col-xs-6">
<em>
43
</em>
<p>
clients
</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<em>
50
</em>
<p>
projects completed
</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<em>
113
</em>
<p>
Months
</p>
</div>
<div class="col-md-3 col-sm-3 col-xs-6">
<em>
99
</em>
<p>
%Client Satisfaction
</p>
</div>
</div>
</div>
</section>
<!--Services-->
<section class="well well3">
<div class="container">
<h3 class="text-center">
Our Services
</h3>
<div class="row">
<div class="col-md-4 col-sm-6 col-xs-12 wow fadeInRight" data-wow-delay=".7s">
<div class="thumbnail thumbnail4">
<img src="images/architecture.jpg" alt="">
<div class="caption">
<h6>
Budget Planning & Architectural Design
</h6>
<p>
We consult with our clients to help them build their
projects from the ground up. We assist our clients in
planning for their budget to ensure that their investments
reach its full potential. We supply well documented and professionally
architectural designs to help are clients envision their dream.
</p>
<a href="#" class="btn-link">
<span class="fst" data-txt="Read More"></span>
<span class="snd" data-txt="Read More"></span>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 wow fadeInRight" data-wow-delay=".5s">
<div class="thumbnail thumbnail4">
<img src="images/renovation.jpg" alt="Renovations">
<div class="caption">
<h6>
Building Renovation
</h6>
<p>
We specialize in building renovations. We provide
a wide variety of alterations from painting to tilling as well as structural
additions to your current building infrastructure.
</p>
<a href="#" class="btn-link">
<span class="fst" data-txt="Read More"></span>
<span class="snd" data-txt="Read More"></span>
</a>
</div>
</div>
</div>
<div class="col-md-4 col-sm-6 col-xs-12 wow fadeInRight" data-wow-delay=".3s">
<div class="thumbnail thumbnail4">
<img src="images/steel.jpg" alt="Steel Constructions">
<div class="caption">
<h6>
Steel Constructions
</h6>
<p>
We have a broad number of skills and expertise to meet your
your requirements. We take on various steel projects of any
size and ensure that we deliver on your expectations.
</p>
<a href="#" class="btn-link">
<span class="fst" data-txt="Read More"></span>
<span class="snd" data-txt="Read More"></span>
</a>
</div>
</div>
</div>
</div>
</div>
</section>
<!--Image 2-->
<section class="well well4 parallax text-center" data-url="images/parallax2.jpg" data-mobile="true"
data-speed="0.6">
<div class="container">
<h2>
<!--Title--><br/>
</h2>
<p class="white ins1">
</p>
</div>
</section>
<!--Why Choose Us-->
<section class="well well5">
<div class="container">
<h3 class="text-center">
Why Choose Us?
</h3>
<p class="text-center lead">
Doing business in a competitive industry requires professional expertise and workmanship, therefore
we would like to point out why our clients choose us above our competitors.
</p>
<div class="row">
<ul class="icon-list wow fadeInLeft" data-wow-duration="2s">
<!--Dependability-->
<li class="col-md-4 col-sm-6 col-xs-12">
<h6>
<a href="#">
Dependability
</a>
</h6>
<p>
We do what we say, and deliver on our promises. It is important
to us that we can win over our clients trust and work hard to maintain
their loyalty.
</p>
</li>
<!--Affordability-->
<li class="col-md-4 col-sm-6 col-xs-12">
<h6>
<a href="#">
Affordability
</a>
</h6>
<p>
By continuous collaboration with suppliers to cut
cost on all material expenditures to ensure that our clients
gets the best price for quality products.
</p>
</li>
<!--Satisfying Result--->
<li class="col-md-4 col-sm-6 col-xs-12">
<h6>
<a href="#">
Satisfying Results
</a>
</h6>
<p>
We work hard to ensure implementation meets the design and
that our projects stay on schedule. Customer satisfaction remains
our priority.
</p>
</li>
<!--Punctuality-->
<li class="col-md-4 col-sm-6 col-xs-12">
<h6>
<a href="#">
Punctuality
</a>
</h6>
<p>
It is important to us to remain punctual to stay on track of schedules. Therefore
our planning oversees our challenges and that is how we remain competitive and reliable.
</p>
</li>
<!---Passion-->
<li class="col-md-4 col-sm-6 col-xs-12">
<h6>
<a href="#">
Passionate
</a>
</h6>
<p>
Our overall passion in developing and constructing buildings
is the force that drives our business to strive in being extraordinary.
</p>
</li>
<li class="col-md-4 col-sm-6 col-xs-12">
<h6>
<a href="#">
Cohesiveness
</a>
</h6>
We have a united and motivated workforce that have one clear
objective...to tend to our client's every need. We do not compromise
on the quality of service delivered to our clients.
<p>
</p>
</li>
</ul>
</div>
</div>
</section>
<section class="well well4 parallax text-center" data-url="images/parallax3.jpg" data-mobile="true"
data-speed="0.6">
<div class="container">
<h2>
<!--Title--><br/>
</h2>
<p class="white ins1">
</p>
</div>
</section>
<!-- <div class="map">
<div id="google-map" class="map_model"></div>
<ul class="map_locations">
<li data-x="-73.9874068" data-y="40.643180">
<p> 9870 St Vincent Place, Glasgow, DC 45 Fr 45. <span>800 2345-6789</span></p>
</li>
</ul>
</div>-->
</main>
以下显示了运行时遇到的错误图像 在Chrome浏览器中
Image: Error Produced by the Google Chrome Debuger
要点： ui-view未正确加载home.html视图，因为它似乎无法引用index.html中包含的javascript文件来正确呈现显示。
注意 当我用index.html中的html标记替换index.html中的ui-view指令时，一切似乎都正常工作。什么都没有错误。
答案 0 :(得分：0)
实际问题是wow.js
init() tm-scripts.js
尝试使用sync()方法
app.run(function($rootScope, $urlRouter){
$rootScope.$on("$stateChangeStart", function(evt){
console.log("test....");
new WOW().sync();
});
});