Search code examples
jqueryangularjsfancybox

Angularjs Controller Called Twice?

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;

Solution

  • 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()