CODEWITHSUNDEEP
angularjs
Brandon Michael Hunter
Brandon Michael Hunter

Reputation: 1221

AngularJs & Cannot read property of 'SetNavBanner' of undefined

I'm working on a simple single page application using angular. I have one module and several different controllers. Within my module I have a factory service that sets on css on the page. The factory service is called within each of the different controllers. When the factory service is called from a controller, I get the following error: "Cannot read property 'SetNavBanner' of undefined.

My code is posted below, Please help. Thank you in advance.

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>

app/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" })*/
}]);

home/HomeCtrl.js

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

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/BlogCtrl.js

app.controller('BlogCtrl', ['$scope', function($scope,NavBannerService){
   new WOW().init();

   NavBannerService.SetNavBanner("liBlog");

   //anglar.element(document).find('')
}]);

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>

EDIT: After updating my factor service this, then it worked:

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};
});

Why would that work, instead of this?

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";
       }
    }

  };

});

Upvotes: 1

Views: 145

Answers (2)

Thatkookooguy
Thatkookooguy

Reputation: 7012

In your controller, you used the array syntax (which is recommended) but you forgot to add the factory in the array.

instead of: home/HomeCtrl.js

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

you need: home/HomeCtrl.js

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

Because of that, when you try to access an inner function, the object is empty since it wasn't imported

Upvotes: 1

Prasad
Prasad

Reputation: 1600

Change your controller to the following :- 

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

Refer angular Doc @ dependency Injection :-

https://docs.angularjs.org/guide/di

Thanks

Upvotes: 1

Related Questions