JavaScript的不是用户界面视图外部访问 [英] JavaScript not accessible outside the ui-view
本文介绍了JavaScript的不是用户界面视图外部访问的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我一直在试图解决一个问题，这是previously有人对这个链接堆栈溢出类似的问题放弃：<一href=\"http://stackoverflow.com/questions/29995949/javascript-not-accessible-from-inside-angular-ui-view\">$p$pvious问题并试图解决方案
I have been trying to fix a problem that was previously discarded by someone with a similar problem on stack overflow at this link: Previous Problem and attempted solutions
我已经装了这个地址在Github上的完整项目解决方案： 项目
问题描述：
在index.html文件加载位于谐音的home.html的/ home.html的通过AngularJS UI路由器的用户界面视图指令，预期显示似乎打破这是由home.html的无法访问原因引起的javascript参考需要正确渲染显示。
When the index.html file loads the home.html located in the partials/home.html via AngularJS ui router's ui-view directive, the expected display seems to break which is caused by the home.html not able to access the javascript reference needed to render the display correctly.
详细说明
在项目中，我试图创建使用AngularJS一个SPA。我的主要目标网页是含有加载谐音意见UI视图指令中的index.html。以下是在所有的index.html我的code。
Detail Description In my project I have attempted to create a SPA using AngularJS. My main landing page is the index.html that contains the ui-view directive for loading partials views. The following is all my code in the 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 /角/ Main.js其配置的路由选项文件夹中的角code。
The following snippet shows the angular code in the js/Angular/Main.js folder which configures the the route options.
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视图负载。
Next is the partial view that the ui-view loads when the index.html is loaded for the first time that is located at 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浏览器
The following shows the image of the error I encounter when I run it in the chrome browser
摘要：
该home.html的观点不被用户界面视图正确加载，因为它似乎是无法引用包含在index.html中的JavaScript文件正确的显示画面。
Summary: The home.html view is not loaded correctly by the ui-view, as it seems that it is not able to reference the javascript files that is contained in the index.html to render the display correctly.
注意
当我与在home.html的HTML标记中的index.html更换UI视图指令，然后一切似乎正常工作。有没有错误都没有。
Note When I replace the ui-view directive in the index.html with the html markup in the home.html then everything appears to be working correctly. there is no errors what so ever.
推荐答案
实际的问题是 wow.js 的init（）里面装 TM-scripts.js中
The actual problem is the wow.js init() loaded inside tm-scripts.js
尝试把状态改变事件中使用同步（）法
Try to put inside state change event with sync() method
app.run(function($rootScope, $urlRouter){
$rootScope.$on("$stateChangeStart", function(evt){
console.log("test....");
new WOW().sync();
});
});
这篇关于JavaScript的不是用户界面视图外部访问的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
![图片：错误由谷歌Chrome Debuger](\"http://i.stack.imgur.com/5caTE.png\"){kind=link}