All geek questions in one place

Angularjs controller called twice?

I called data from the server using ngResource . however, I found out that for some reason my controller is being called twice.

Here is my code;

App.js File

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

File HomeController.js;

 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 opinion;

  <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 problem is in the fancybox.js file, which is in the main layout;

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

source files:

  <!-- 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 on fancybox everything works fine, but when I add it back, I get a warning window twice;

+2
source share
2 answers

The main problem with this question for me was how the scripts were organized in my project. So, I comment on each script one by one, and then I got the problem. The problem was that I used a jquery library called pageslide , in a situation where I have a button, and when the user clicks on this button, the page was left / right slide;
So, I just moved all my angular related files to the end of all the scripts, and now I don't see the alert() field twice.

here is an agreement 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()
0
source

Everything looks fine. The problem may be elsewhere. I created a plunker based on the above and executed one controller. You can change it, add your other code, if any, and check it yourself: http://embed.plnkr.co/ttvlTJBhTEd9sQUdkQjX/preview

+1
source

Source: https://habr.com/ru/post/953011/

More articles:


All Articles