Angularjs 安圭拉酒店；无法读取'；SetNavBanner'；未定义的_Angularjs

Angularjs 安圭拉酒店；无法读取'；SetNavBanner'；未定义的

angularjs

Angularjs 安圭拉酒店；无法读取'；SetNavBanner'；未定义的,angularjs,Angularjs,我正在使用angular开发一个简单的单页应用程序。我有一个模块和几个不同的控制器。在我的模块中，我有一个工厂服务，它设置在页面上的css上。在每个不同的控制器中调用factory服务。从控制器调用factory服务时，出现以下错误：无法读取未定义的属性“SetNavBanner” 我的代码贴在下面，请帮忙。提前谢谢 index.html <!DOCTYPE html> <html lang="en"> <head> <meta chars

我正在使用angular开发一个简单的单页应用程序。我有一个模块和几个不同的控制器。在我的模块中，我有一个工厂服务，它设置在页面上的css上。在每个不同的控制器中调用factory服务。从控制器调用factory服务时，出现以下错误：无法读取未定义的属性“SetNavBanner”

我的代码贴在下面，请帮忙。提前谢谢

index.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>

home/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>

blog/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&amp;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>


博客
如果你是一个自由主义者，那么你的权利也会被剥夺，你的权利也会被剥夺

但其他方面都是理解的。比如说，销售圣殿，我是精英萨佩雷特，我的眼睛是紫锥菊。没有一个圣徒，我的灵魂是完美无缺的，我的灵魂是无可辩驳的。我的灵魂是炽热的，我的灵魂是永恒的，我的灵魂是永恒的。我的灵魂是正义的，我的灵魂是永恒的，我的灵魂是永恒的。








但其他人都理解。比如说，销售圣殿，我是精英萨佩雷特，我的眼睛是紫锥菊。不，我是圣人，我是完美无缺的人，我是无可辩驳的人。我是火热的伊朗人，通常是波斯人。通常是马里人，通常是电子人。







第1页，共3页
1.
（20）
（11）
(九)
（12）
（18）

最新帖子



Mazim alienum上诉人欧盟首席法官




Mazim alienum上诉人欧盟首席法官




Mazim alienum上诉人欧盟首席法官



热点标签

编辑： 在更新我的因子服务后，它开始工作：

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（）{
var SetNavBanner=函数（NavElementItem）{
/*将活动元素更改为Blog li元素*/
var navLIs=document.querySelector（'.nav'）.childNodes；
/*从每个li元素中删除所有活动类*/
对于控制器中的（var a=0；a），您使用了数组语法（推荐使用），但忘记在数组中添加工厂
而不是：home/HomeCtrl.js
app.controller('HomeCtrl', ['$scope', function($scope,NavBannerService){
       NavBannerService.SetNavBanner("liHome");
}]);

app.controller('HomeCtrl', ['$scope', function($scope,NavBannerService){
   NavBannerService.SetNavBanner("liHome");
}]);

app.controller('HomeCtrl', ['$scope', 'NavBannerService', function($scope,NavBannerService){
   NavBannerService.SetNavBanner("liHome");
}]);

您需要：home/HomeCtrl.js
app.controller('HomeCtrl', ['$scope', function($scope,NavBannerService){
       NavBannerService.SetNavBanner("liHome");
}]);

app.controller('HomeCtrl', ['$scope', function($scope,NavBannerService){
   NavBannerService.SetNavBanner("liHome");
}]);

app.controller('HomeCtrl', ['$scope', 'NavBannerService', function($scope,NavBannerService){
   NavBannerService.SetNavBanner("liHome");
}]);

因此，当您尝试访问内部函数时，对象是空的，因为它未导入
请将控制器更改为以下内容：-
app.controller('HomeCtrl', ['$scope','NavBannerService', function($scope,NavBannerService){
       NavBannerService.setNavBanner("liHome");
}]);

请参阅依赖项注入时的角度文档：-

谢谢
你现在可以试试吗我刚刚更新了..camelcase调用，如果出现任何错误，请更新错误内容以查看你是否返回了正确的数据。你在计算的同时是否根据两个答案更新了控制器更改..这是实际语法，Michael请通过清理不必要的代码来更新在人们将长代码帖子标记为长帖子标记供参考之前..简短而甜蜜！！如果我给你任何有用的信息，你可以投票..祝你愉快！！