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