1

I am using AngularJS 1.5 and using ‘$emit’ to send an event to parent controller to refresh parent controller data. On ‘$On’ I have written the logic to refresh the parent controller data.

Now, Parent controller data is being updated but after that it is unable to bind data for the child controller from where ‘$emit’ was triggered.

I tried to use ‘$apply’ but it is saying that ‘$digest’ is already in progress. I have also use Batrang tool to view the data and it is showing that page having all those data but it is not being displayed on UI.

Can anybody tell me how to force angular to bind those data with HTML Control which is already available on the page.

I cannot put sample code here because it's a live project & I'll have to create a sample project to replicate the issue. Even though If it is not easy to answer my query without sample code then I will put sample code on Plunker in a day.

Banketeshvar Narayan
  • 3,799
  • 4
  • 38
  • 46

1 Answers1

0

Based on Angular documentation, there are two methods to declare controller in HTML:

one binds methods and properties directly onto the controller using ng-controller="SettingsController1 as settings"

one injects $scope into the controller: ng-controller="SettingsController2"

The second option is more common in the Angular community, and is generally used in boilerplates and in this guide. However, there are advantages to binding properties directly to the controller and avoiding scope.

Using controller as makes it obvious which controller you are accessing in the template when multiple controllers apply to an element. If you are writing your controllers as classes you have easier access to the properties and methods, which will appear on the scope, from inside the controller code. Since there is always a . in the bindings, you don't have to worry about prototypal inheritance masking primitives.

So you could always refer to parent scope in child scope by using controller as:

<div ng-controller="parentController as parent">
    <span>{{parent.title}}</span>
    <div ng-controller="childController as child">
        <span>{{parent.title}}</span>
        <span>{{child.title}}</span>
    </div>
</div>
MarkoCen
  • 2,189
  • 13
  • 24
  • Hi MarKoSen, Thanks for your answer but I do not have any issue in calling method. I have used $emit which is working fine and updating parent data then I am calling method to update child data. even though child data is being loaded in DOM but it is not being displayed on UI. so my main query is how do I display those data on UI which is already available in DOM. – Banketeshvar Narayan Oct 07 '16 at 06:26