I am essentially trying to create html component blocks that can be used in a WordPress page editor. The issue that I am running into is each block is using the ng-controller directive to get access to the scope of said controller. This is resulting in new instances of the same controller being created which is causing a delay in the blocks showing up (it's also not a practical way of doing this).

The way that I have the app currently setup is to use a short-code linked to one large page of html, which is not easily manageable as an end user and moves away from the component based structure i'd like to implement. I've tried using the angularjs .component() directive but I am running into the same issue of having new controller instances.

<div ng-controller="someCtrl"> 
--- first html block that loads first ---

<div ng-controller="someCtrl"> 
--- second html block that is delayed until after the first is loaded ---

Essentially, what I would like to know is whether or not there is a way to access the same controller (excluding a wrapper) without creating new instances of said controller?

3 Answers

Jeff Howard On

The answer is no. Each instance of a controller will be a new instance. You could leverage @TheUnknown's suggestion to share data across these instances, as a service is a singleton.

Sreejit Parakkalam On

you could use the same controller, by using ng-if. so when

<div ng-if="loadFirstHtmlBlock"></div>

is true. it will load only that particular <div>.

Same goes for

<div ng-if="loadSecondHtmlBlock">

This is just a simple method you could use.

Shaquan Kelly On

The end result that I have found as the best way (in angularjs) to fix this sort of issue would be to add different components with their own respective controllers that fetch information from a service. This would then result in much better performance on the page as well as a more 'in sync' type of loading.