Combating AngularJS executing controller twice

Question

I understand AngularJS runs through some code twice  sometimes even more  like  watch events  constantly checking model states etc   However my code   function MyController  scope  User  local     var  scope User   local get       Get locally save user data  User get   id   scope User  id  oid    function user       scope User   new User user     local save  scope User                Is executed twice  inserting 2 records into my DB  I m clearly still learning as I ve been banging my head against this for ages

User · Answer

Just adding my case here as well    I was using angular-ui-router with  state go  new state    foo   foo bar     Once I added encodeURIComponent to the parameter  the problem was gone   state go  new state    foo  encodeURIComponent  foo bar       What happened  The character     in the parameter value is not allowed in URLs  As a consequence  angular-ui-router created my controller twice  during first creation it passed the original  foo bar   during second creation it would pass the encoded version  foo 40bar   Once I explicitly encoded the parameter as shown above  the problem went away

User · Answer

In my case it was because of the url pattern I used  my url was like  ui project  parameter1  parameter2     I didn t need paramerter2 in all cases of state change  In cases where I didn t need the second parameter my url would be like  ui project  parameter1   And so whenever I had a state change I will have my controller refreshed twice   The solution was to set parameter2 as empty string and do the state change

User · Answer

For those using the ControllerAs syntax  just declare the controller label in the  routeprovider as follows    routeprovider          when   link                 templateUrl   templateUrl               controller   UploadsController as ctrl               or   routeprovider          when   link                 templateUrl   templateUrl               controller   UploadsController              controllerAs   ctrl               After declaring the  routeprovider  do not supply the controller as in the view  Instead use the label in the view

User · Answer

I tore my app and all its dependencies to bits over this issue  details here  AngularJS app initiating twice  tried the usual solutions      And in the end  it was all Batarang Chrome plugin s fault   Resolution in this answer     I d strongly recommend the first thing on anyone s list is to disable it per the post before altering code

User · Answer

My issue was updating the search parameters like so  location search  param   key    you can read more about it here  controller getting called twice due to append params in url

User · Answer

Would like to add for reference   Double controller code execution can also be caused by referencing the controller in a directive that also runs on the page    e g   return                restrict   A               controller   myController               link  function   scope           When you also have ng-controller  myController  in your HTML

User · Answer

I just went through this  but the issue was different from the accepted answer  I m really leaving this here for my future self  to include the steps I went through to fix it    Remove redundant controller declarations Check trailing slashes in routes Check for ng-ifs Check for any unnecessary wrapping ng-view calls  I accidentally had left in an ng-view that was wrapping my actual ng-view  This resulted in three calls to my controllers   If you are on Rails  you should remove the turbolinks gem from your application js file  I wasted a whole day to discover that  Found answer here  Initializing the app twice with ng-app and with bootstrap  Combating AngularJS executing controller twice When using  compile on whole element in  link -function of directive that also has its own controller defined and uses callbacks of this controller in template via ng-click etc  Found answer here

User · Answer

I ve had this double initialisation happen for a different reason  For some route-transitions in my application I wanted to force scrolling to near the top of the page  e g  in paginated search results    clicking next should take you to the top of page 2    I did this by adding a listener to the  rootScope  on  viewContentLoaded which  based on certain conditions  executed   location hash  top      Inadvertently this was causing my routes to be reevaluated and the controllers to be reinitialised

User · Answer

AngularJS docs  - ngController   Note that you can also attach controllers to the DOM by declaring it   in a route definition via the  route service  A common mistake is to   declare the controller again using ng-controller in the template   itself  This will cause the controller to be attached and executed   twice    When you use ngRoute with the ng-view directive  the controller gets attached to that dom element by default  or ui-view if you use ui-router   So you will not need to attach it again in the template

User · Answer

In my case renaming the controller to a different name solved the problem   There was a conflict of controller names with  angular-ui-tree  module  I renamed my controller from  CatalogerTreeController  to  TreeController  and then this controller starts to be initiated twice on the page where  ui-tree  directive used because this directive uses controller named  TreeController

User · Answer

I just solved mine  which was actually quite disappointing  Its a ionic hybrid app  I ve used ui-router v0 2 13  In my case there is a epub reader  using epub js  which was continuously reporting  no document found  once I navigate to my books library and select any other book  When I reloaded the browser book was being rendered perfectly but when I selected another book got the same problem again   My solve was very simple  I just removed reload true from  state go  app reader     fileName  fn  reload  true     in my LibraryController

User · Answer

The problem I am encountering might be tangential  but since googling brought me to this question  this might be appropriate  The problem rears its ugly head for me when using UI Router  but only when I attempt to refresh the page with the browser refresh button  The app uses UI Router with a parent abstract state  and then child states off the parent  On the app run   function  there is a  state go     child-state      command  The parent state uses a resolve  and at first I thought perhaps a child controller is executing twice   Everything is fine before the URL has had the hash appended  www someoldwebaddress org  Then once the url has been modified by UI Router  www someoldwebaddress org  childstate     and then when I refresh the page with the browser refresh button  the  stateChangeStart fires twice  and each time points to the childstate   The resolve on the parent state is what is firing twice   Perhaps this is a kludge  regardless  this does appear to eliminate the problem for me  in the area of code where  stateProvider is first invoked  first check to see if the window location hash is an empty string  If it is  all is good  if it is not  then set the window location hash to an empty string  Then it seems the  state only tries to go somewhere once rather than twice   Also  if you do not want to rely on the app s default run and state go       you can try to capture the hash value and use the hash value to determine the child state you were on just before page refresh  and add a condition to the area in your code where you set the state go

User · Answer

In my case  I found two views using the same controller    stateProvider state  app       url        views         viewOne app           controller   CtrlOne as CtrlOne         templateUrl   main one tpl html              viewTwo app           controller   CtrlOne as CtrlOne         templateUrl   main two tpl html

User · Answer

In some cases your directive runs twice when you simply not correct close you directive like this    lt my-directive gt Some content lt my-directive gt   This will run your directive twice  Also there is another often case when your directive runs twice   make sure you are not including your directive in your index html TWICE

User · Answer

Just want to add one more case when controller can init twice  this is actual for angular js 1 3 1     lt div ng-if  loading  gt Loading    lt  div gt   lt div ng-if   loading  gt       lt div ng-view gt  lt  div gt   lt  div gt    In this case  route current will be already set when ng-view will init  That cause double initialization   To fix it just change ng-if to ng-show ng-hide and all will work well

User · Answer

If you know your controller is unintentionally executing more than once  try a search through your files for the name of the offending controller  ex  search  MyController through all files  Likely it got copy-pasted in some other html js file and you forgot to change it when you got to developing or using those partials controllers  Source  I made this mistake

User · Answer

Been scratching my head over this problem with AngularJS 1 4 rc build  then realised none of the above answers was applicable since it was originated from the new router library for Angular 1 4 and Angular 2 at the time of this writing  Therefore  I am dropping a note here for anyone who might be using the new Angular route library   Basically if a html page contains a ng-viewport directive for loading parts of your app  by clicking on a hyperlink specified in  with ng-link would cause the target controller of the associated component to be loaded twice  The subtle difference is that  if the browser has already loaded the target controller  by re-clicking the same hyperlink would only invoke the controller once    Haven t found a viable workaround yet  though I believe this behaviour is consistent with the observation raised by shaunxu  and hopefully this issue would be resolved in the future build of new route library and along with AngularJS 1 4 releases

User · Answer

I had the same problem  in a simple app  with no routing and a simple ng-controller reference  and my controller s constructor did run twice  Finally  I found out that my problem was the following declaration to auto-bootstrap my AngularJS application in my Razor view   lt html ng-app  mTest1  gt    I have also manually bootstrapped it using angular bootstrap i e   angular bootstrap document   this app name      so removing one of them  it worked for me

User · Answer

My issue was really difficult to track down  In the end  the problem was occurring when the web page had missing images  The src was missing a Url  This was happening on an MVC 5 Web Controller  To fix the issue  I included transparent images when no real image is available   lt img alt  quot  quot  class  quot logo quot  src  quot  quot  gt

User · Answer

I had the same problem and after trying all the answers I finally found that i had a directive in my view that was bound to the same controller   APP directive  MyDirective   function       return       restrict   AE       scope          templateUrl      views quiz html       controller   ShowClassController          After removing the directive the controller stopped being called twice  Now my question is  how can use this directive bound to the controller scope without this problem

User · Answer

I figured out mine is getting called twice is because i was calling the method twice from my html     lt form class  form-horizontal  name  x  ng-submit  findX   novalidate  gt    lt input type  text      gt    lt input type  text      gt    lt input type  text      gt    lt button type  submit  class  btn btn-sm btn-primary  ng-click  findX     lt  form gt     The highlighted section was causing findX   to be called twice  Hope it helps someone

User · Answer

When using angular-ui-router with Angular 1 3   there was an issue about Rendering views twice on route transition  This resulted in executing controllers twice  too  None of the proposed solutions worked for me   However  updating angular-ui-router from 0 2 11 to 0 2 13 solved problem for me

User · Answer

I have the same issue in angular-route 1 6 7  and it because the extra slash in the end of regex route    when   goods publish  classId    option    to   when   goods publish  classId   option    and it works correctly

User · Answer

The app router specified navigation to MyController like so    routeProvider when                           templateUrl   pages home html                        controller  MyController       But I also had this in home html    lt div data-ng-controller  MyController  gt    This digested the controller twice  Removing the data-ng-controller attribute from the HTML resolved the issue  Alternatively  the controller  property could have been removed from the routing directive   This problem also appears when using tabbed navigation  For example  app js might contain      state  tab reports         url    reports       views           tab-reports             templateUrl   templates tab-reports html           controller   ReportsCtrl                       The corresponding reports tab HTML might resemble    lt ion-view view-title  Reports  gt     lt ion-content ng-controller  ReportsCtrl  gt    This will also result in running the controller twice

[angularjs] Combating AngularJS executing controller twice

Examples related to angularjs