-4
我一直在試圖解決以前被人用類似的問題，在這個環節被丟棄在堆棧溢出問題：Previous Problem and attempted solutions的JavaScript不是UI視外部訪問
我擁有多達加載完整的項目解決方案在Github在這個地址：Project
問題描述：
當index.html文件加載位於該分音/ home.html的經由AngularJS UIロhome.html做爲子宮的ui-view指令，預期的顯示似乎中斷，這是由於home.html無法訪問正確呈現顯示所需的javascript引用引起的。
詳細描述 在我的項目中，我嘗試使用AngularJS創建一個SPA。我的主着陸頁是包含用於加載partials視圖的ui-view指令的index.html。以下是我在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的裝載對於位於分音/ home.html的首次UI視圖負載。
<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>
以下顯示了錯誤的我遇到圖像當我在鉻瀏覽器運行它
Image: Error Produced by the Google Chrome Debuger
總結： 的home.html的視圖沒有被正確裝載ui-view，因爲它似乎無法引用index.html中包含的javascript文件來正確顯示顯示。
注意 當我更換同在home.html的HTML標記的index.html中的用戶界面視圖的指令，然後一切似乎正常工作。沒有任何錯誤是如此。
請複製一個小例子，*** ***在這裏，說明了問題。 – deceze
沒有人會通過回購試圖尋找一個甚至沒有明確定義的問題的代碼。在問題中包含相關代碼，並提供對問題的更好解釋以及來自瀏覽器開發工具的錯誤狀態 – charlietfl
我已經給出了我的問題的完整概述。所以問題再次是爲什麼部分視圖（home.html）不能獲得對index.html中包含的JavaScript文件的適當引用。 – Gerhard