1
我正在使用角度的簡單單頁應用程序。我有一個模塊和幾個不同的控制器。在我的模塊中，我有一個在頁面上設置CSS的工廠服務。工廠服務在每個不同的控制器中調用。當工廠服務是從控制器叫，我得到以下錯誤： 「無法讀取的未定義的屬性‘SetNavBanner’AngularJs＆無法讀取'SetNavBanner'的屬性undefined
我的代碼貼在下面，請幫忙，謝謝提前
指數。 html的
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap 1 Template</title>
<!-- Bootstrap -->
<link href="css/bootstrap.min.css" rel="stylesheet">
<link rel="stylesheet" href="css/font-awesome.min.css" />
<link rel="stylesheet" href="css/font-awesome.css" />
<link rel="stylesheet" href="js/fancybox/jquery.fancybox.css" type="text/css" media="screen" />
<link rel="stylesheet" type="text/css" href="css/isotope.css" media="screen" />
<link rel="stylesheet" href="css/style.css">
<!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular.min.js"></script>
</head>
<body ng-app="appMod">
<!-- Start: Header -->
<div ng-include="'templates/header.html'"></div>
<!-- End: Header -->
<!-- Start: Content -->
<div ng-view></div>
<!-- End: Content -->
<!-- Start: Footer -->
<div ng-include="'templates/footer.html'"></div>
<!-- End: Footer -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.isotope.min.js"></script>
<script src="js/fancybox/jquery.fancybox.pack.js"></script>
<script src="js/wow.min.js"></script>
<!-- Vendor: Angular, followed by our custom Javascripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0/angular-route.min.js"></script>
<!-- parent angular module and controller that supports SPA (Single Page Application) -->
<script src="app/appMod.js"></script>
<script src="app/home/HomeCtrl.js"></script>
<script src="app/blog/BlogCtrl.js"></script>
<script src="js/functions.js"></script>
</body>
</html>
應用程序/ appMod.js
var app = angular.module("appMod", ["ngRoute"])
app.factory('NavBannerService', function(){
function _setNavBanner(NavElementItem){
/* Change the active element to the Blog li element. */
var navLIs = document.querySelector('.nav-pills').childNodes;
/* Remove all the active class from each li element. */
for(var a = 0; a <= navLIs.length-1; a++)
{
navLIs[a].className = "";
alert(NavElementItem)
if(navLIs[a].id == NavElementItem)
{
alert(NavElementItem)
navLIs[a].className = "active";
}
}
};
return{
SetNavBanner: _setNavBanner
};
});
/* Configure the Routes*/
app.config(['$routeProvider', function ($routeProvider) {
$routeProvider
.when("/", { templateUrl: "app/home/home.html", controller: "HomeCtrl" })
.when("/Blog", {templateUrl: "app/blog/blog.html", controller: "BlogCtrl"})
.otherwise({ redirectTo: '/' });
/*.when("/SearchByEmployees", { templateUrl: "Search/SearchByEmployees.html", controller: "SearchByEmpCtrl" })
.when("/Procurements", { templateUrl: "Procurements/ProcurementView.html", controller: "ProcurementCtrl" })
.when("/Participants", { templateUrl: "Participants/ParticipantsSummaryView.html", controller: "ParticipantsCtrl" })*/
}]);
家/ HomeCtrl.js
app.controller('HomeCtrl', ['$scope', function($scope,NavBannerService){
NavBannerService.SetNavBanner("liHome");
}]);
家/ home.html的
<div ng-controller="HomeCtrl">
<div class="slider">
<img src="img/bg-main1.jpg" alt="" class="img-responsive" />
</div>
<!-- column content -->
<div id="main-content">
<div class="container">
<div class="row">
<div class="big-box">
<div class="col-lg-12">
<div class="col-md-4">
<div class="box-bg">
<div class="wow bounceInLeft" data-wow-duration="2s" data-wow-delay="0.9s">
<div class="align-center">
<i class="fa fa-camera-retro fa-5x"></i>
<h4 class="text-bold">Customizable</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box-bg">
<div class="wow bounceInLeft" data-wow-duration="2s" data-wow-delay="0.6s">
<div class="align-center">
<i class="fa fa-shield fa-5x"></i>
<h4 class="text-bold">Valid HTML5</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.
</p>
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="box-bg">
<div class="wow bounceInLeft" data-wow-duration="2s" data-wow-delay="0.2s">
<div class="align-center">
<i class="fa fa-circle fa-5x"></i>
<h4 class="text-bold">Responsive</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.
</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="row">
<div class="wow bounceInRight">
<div class="col-lg-6">
<h4>Maecenas luctus</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.</p>
<a href="#" class="thumbnail">
<img src="img/thumbnails/outline-1.jpg" alt="">
</a>
</div>
</div>
<div class="wow bounceInLeft">
<div class="col-lg-6">
<h4>Maecenas luctus</h4>
<p>Lorem ipsum dolor sit amet, mutat graeco volumus ad eam, singulis patrioque comprehensam nam no.
Mei cu dicat voluptaria volumus.</p>
<a href="#" class="thumbnail">
<img src="img/thumbnails/ipad.jpg" alt="">
</a>
</div>
</div>
</div>
</div>
</div>
<!-- end column content -->
</div>
博客/ BlogCtrl.js
app.controller('BlogCtrl', ['$scope', function($scope,NavBannerService){
new WOW().init();
NavBannerService.SetNavBanner("liBlog");
//anglar.element(document).find('')
}]);
博客/ blog.html
<div ng-controller="BlogCtrl">
<div class="row mar-bot40">
<div class="col-md-offset-3 col-md-6">
<div class="sections-header">
<h2>Blog</h2>
<p>Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet consectetur, adipisci velit, sed quia non numquam.</p>
</div>
</div>
</div>
<section id="content">
<div class="container">
<div class="row">
<div class="col-lg-8">
<article>
<div class="post-image">
<div class="post-heading">
<h3><a href="#">This is an example of standard post format</a></h3>
</div>
<img src="img/portfolio/img1.jpg" alt="" />
</div>
<p>
Qui ut ceteros comprehensam. Cu eos sale sanctus eligendi, id ius elitr saperet, ocurreret pertinacia pri an. No mei nibh consectetuer, semper laoreet perfecto ad qui, est rebum nulla argumentum ei. Fierent adipisci iracundia est ei, usu timeam persius ea. Usu ea justo malis, pri quando everti electram ei, ex homero omittam salutatus sed.
</p>
<div class="bottom-article">
<ul class="meta-post">
<li><i class="icon-calendar"></i><a href="#"> Mar 23, 2013</a></li>
<li><i class="icon-user"></i><a href="#"> Admin</a></li>
<li><i class="icon-folder-open"></i><a href="#"> Blog</a></li>
<li><i class="icon-comments"></i><a href="#">4 Comments</a></li>
</ul>
<a href="#" class="pull-right">Continue reading <i class="icon-angle-right"></i></a>
</div>
</article>
<article>
<div class="post-video">
<div class="post-heading">
<h3><a href="#">Amazing video post format here</a></h3>
</div>
<div class="video-container">
<iframe src="http://player.vimeo.com/video/30585464?title=0&byline=0">
</iframe>
</div>
</div>
<p>
Qui ut ceteros comprehensam. Cu eos sale sanctus eligendi, id ius elitr saperet, ocurreret pertinacia pri an. No mei nibh consectetuer, semper laoreet perfecto ad qui, est rebum nulla argumentum ei. Fierent adipisci iracundia est ei, usu timeam persius ea. Usu ea justo malis, pri quando everti electram ei.
</p>
<div class="bottom-article">
<ul class="meta-post">
<li><i class="icon-calendar"></i><a href="#"> Mar 23, 2013</a></li>
<li><i class="icon-user"></i><a href="#"> Admin</a></li>
<li><i class="icon-folder-open"></i><a href="#"> Blog</a></li>
<li><i class="icon-comments"></i><a href="#">4 Comments</a></li>
</ul>
<a href="#" class="pull-right">Continue reading <i class="icon-angle-right"></i></a>
</div>
</article>
<div id="pagination">
<span class="all">Page 1 of 3</span>
<span class="current">1</span>
<a href="#" class="inactive">2</a>
<a href="#" class="inactive">3</a>
</div>
</div>
<div class="col-lg-4">
<aside class="right-sidebar">
<div class="widget">
<form class="form-search">
<input class="form-control" type="text" placeholder="Search..">
</form>
</div>
<div class="widget">
<h5 class="widgetheading">Categories</h5>
<ul class="cat">
<li><i class="icon-angle-right"></i><a href="#">Web design</a><span> (20)</span></li>
<li><i class="icon-angle-right"></i><a href="#">Online business</a><span> (11)</span></li>
<li><i class="icon-angle-right"></i><a href="#">Marketing strategy</a><span> (9)</span></li>
<li><i class="icon-angle-right"></i><a href="#">Technology</a><span> (12)</span></li>
<li><i class="icon-angle-right"></i><a href="#">About finance</a><span> (18)</span></li>
</ul>
</div>
<div class="widget">
<h5 class="widgetheading">Latest posts</h5>
<ul class="recent">
<li>
<img src="img/blog/1.jpg" class="pull-left" alt="" />
<h6><a href="#">Lorem ipsum dolor sit</a></h6>
<p>
Mazim alienum appellantur eu cu ullum officiis pro pri
</p>
</li>
<li>
<a href="#"><img src="img/blog/2.jpg" class="pull-left" alt="" /></a>
<h6><a href="#">Maiorum ponderum eum</a></h6>
<p>
Mazim alienum appellantur eu cu ullum officiis pro pri
</p>
</li>
<li>
<a href="#"><img src="img/blog/3.jpg" class="pull-left" alt="" /></a>
<h6><a href="#">Et mei iusto dolorum</a></h6>
<p>
Mazim alienum appellantur eu cu ullum officiis pro pri
</p>
</li>
</ul>
</div>
<div class="widget">
<h5 class="widgetheading">Popular tags</h5>
<ul class="tags">
<li><a href="#">Web design</a></li>
<li><a href="#">Trends</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">Internet</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Development</a></li>
</ul>
</div>
</aside>
</div>
</div>
</div>
</section>
</div>
編輯： 更新我的因素後，服務這個，然後它工作：
app.factory('NavBannerService', function(){
var SetNavBanner = function(NavElementItem){
/* Change the active element to the Blog li element.*/
var navLIs = document.querySelector('.nav-pills').childNodes;
/* Remove all the active class from each li element. */
for(var a = 0; a <= navLIs.length-1; a++)
{
navLIs[a].className = "";
if(navLIs[a].id == NavElementItem)
{
navLIs[a].className = "active";
}
}
};
return {SetNavBanner: SetNavBanner};
});
爲什麼會這樣，而不是這個？
app.factory('NavBannerService', function(){
this. SetNavBanner = function(NavElementItem){
/* Change the active element to the Blog li element.*/
var navLIs = document.querySelector('.nav-pills').childNodes;
/* Remove all the active class from each li element. */
for(var a = 0; a <= navLIs.length-1; a++)
{
navLIs[a].className = "";
if(navLIs[a].id == NavElementItem)
{
navLIs[a].className = "active";
}
}
};
});
沒有工作。我仍然遇到同樣的錯誤。 –
你可以嘗試它現在我只是更新.. camelcase調用，如果有任何錯誤引發請更新錯誤內容內容tooo – Prasad
確定了它，你正在返回正確的data.You計算它在同一時間你更新控制器chage從兩個答案..這是實際的語法和邁克爾請更新通過清理不必要的代碼在這裏人們標記長代碼帖子爲LONG POST Tag fyi ..簡短而甜蜜！你可以投票，如果我給你任何有用的信息..祝你有美好的一天！ – Prasad