Angularjs Controller Called Twice?

Question

I have called the data from server using ngResource. however, i have figured out that for some reason, my controller is called twice.
Here is my code;

App.js file

// declare a module
var blogApp = angular.module('blogApp', ['ngResource']);

HomeController.js file;

blogApp.controller("HomeController", function ($scope, $resource) {
    var HotNews = $resource('/api/article/hotnews?culture=en-US');
    $scope.news = HotNews.query();
    alert("hello"); //here i see hello alert box two times
});

my view;

  <ul id="news" data-ng-controller="HomeController">
      <li data-ng-repeat="headline in news">
          {{headline.description}}
          <a href="#" title="Read More">» more</a>
      </li>
  </ul>

Updated: the issue is in fancybox.js file that is in main layout;

<html data-ng-app="blogApp">

the source files are;

    <!-- JS -->
<script src="/Content/scripts/lib/angular.min.js"></script>
<script src="/Content/scripts/lib/angular-resource.min.js"></script>
<script src="/Content/scripts/app/app.js"></script>
<script src="/Content/scripts/app/controllers/HomeController.js"></script>
@Scripts.Render("~/bundles/jquery")
<script src="/content/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

when i comment out the fancybox, all works fine but when i add it back, i get two times alert box;

do you bootstrap your app ? or do you use ng-app ? or both ? — Ven, Jun 01 '13 at 16:42

score 1 · Answer 1 · answered Jun 01 '13 at 17:35

1

All looks ok. The problem could be elsewhere. I created a plunker based on the above and executed the controller once. You may want to modify it, add your other code if any and test it out yourself: http://embed.plnkr.co/ttvlTJBhTEd9sQUdkQjX/preview

answered Jun 01 '13 at 17:35

maethorr

594
4
7

Updated plunker with fancybox and jquery. Still worked ok. I tried 1.3.4 fancy and got some undefined msie error while loading the script so I upgraded it to the latest version. Both did load the controller only once. Maybe try upgrading your fancybox as it is now version 2.x.x. – maethorr Jun 01 '13 at 18:05

score 0 · Accepted Answer · answered Jun 01 '13 at 18:29

The main point with this issue for me, was the way the scripts were arranged in my project. So, i comment- out each script one by one, and then i got the issue. The issue was, i was using jquery library called pageslide, in a situation where i have a button and when a user click on that button, the page were slide to left/right;
SO, i just move all of my angular related files to the end of all the scripts and now, i don't see the alert() box two times.
here is the arrangement that works for me;

 @Scripts.Render("~/bundles/jquery")
    <script src="/Content/fancybox/jquery.fancybox-1.3.4.pack.js"></script>
    <script src="/content/scripts/lib/general.js"></script>
    <script src="/content/scripts/lib/function.js"></script>
    <script src="/content/scripts/lib/styleswitch.js"></script>
    <!-- elRTE -->
    <script src="/content/scripts/lib/elrte/elrte.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="/Content/scripts/app/dataservice.js"></script>
    <script src="/Content/scripts/app/statemanager.js"></script>

    // this was causing the problem

    <script>
        $("#allpage-login-top").pageSlide({ width: "350px", direction: "left" });
        $("#allpage-signup-top").pageSlide({ width: "350px", direction: "right" });
        $("#allpage-search-top").pageSlide({ width: "350px", direction: "left", modal: true });
        $("#homepage-login-button").pageSlide({ width: "350px", direction: "left" });
        $("#homepage-signup-button").pageSlide({ width: "350px", direction: "right" });
    </script>
        <!-- JS -->
    <script src="/Content/scripts/lib/angular.min.js"></script>
    <script src="/Content/scripts/lib/angular-resource.min.js"></script>
    <script src="/Content/scripts/app/app.js"></script>
    <script src="/Content/scripts/app/controllers/HomeController.js"></script>

    @RenderSection("scripts", required: false)
    @MiniProfiler.RenderIncludes()

Angularjs Controller Called Twice?

2 Answers2

Linked