ng-include ~ scope binding issue.

[sadha sivam]

Hi Team,

I have issue in scope not bindind with ng-include directive, till date i'm not getting solution.

Please refer below plunkr link and please give solution.

http://plnkr.co/edit/Um1w4RropGPNHimWE5xB?p=preview

Regards,
SADHASIVAM.P

[Gordon Bockus]

ngInclude creates a new child scope which inherits scope values from the parent controller.  

Here is a good stack overflow explaining in detail: http://stackoverflow.com/questions/11412410/angularjs-losing-scope-when-using-ng-include

Also I noticed that you were defining the controller in each template which I think was creating three instances of the controller.  I moved it up so there would be a single controller declared.  It may work the way you had it, but I've never done it that way.

Updated plunker: http://plnkr.co/edit/0FSgvk?p=preview

Gordon

[Sander Elias]

Hi Sadha,

Gordon is right. ng-include creates a new scope. However, this is not where you problem is coming from. As Gordon pointed out you have 3 ng-controller=’pageController’.
This will get you 3 new controllers, all different from each other. If this is what you need, fine, but it will never give you what you need in this case.
I also fixed up your plunk to do what is expected. Its similar to that of Gordon, (I was away from my desk, and came back playing with your plunk, I just came back here and saw Gordon’s reply ;) )
this is what I have done, and why!

1. Moved the ng-controller to the body tag. As you aptly named it pageController, that seemed the right place. removed all the other ng-controllers.
   
2. Removed the $scope.inp from the script. As every ng-include gets it own new scope, and it was only used as a temp var to be pushed into the array.
   in a real application you might want to create a separate controller to handle this stuff. for now I just declared it in the view.
   Also, you should look up the Angular dot rule!
3. Changed the ng-click to take the inp as an argument. This is important! ng-include creates its own new scope, and the function pushValue is
   declared on a higher-up scope. The higher-up scope has no access to the child’s scopes inp (dot rule again..)

Well, that’s about it I guess,
If you have further questions, don’t hesitate to ask!

Regards
Sander

[Sander Elias]

whoops, forgot to link in the new plunk: http://plnkr.co/edit/idEecH?p=preview

[sadha sivam]

Thanks to all , I'm beginner for AngularJS project.. kindly guide me..

Please see attached Image file.

In SPA, (index.html) have header, footer, navigation bar and ng-view (body).  In route configuration declared as a landingPage as a default page. (otherwise).
Once page loaded, landing.html will rendered in ng-view, page selector, login, accordion control repository selection, login, logout all function in landingController.


header.html (ng-controller="landingController")
footer.html (ng-controller="landingController")
navigation.html(ng-controller="landingController")

Once page changed, controller view bind with route config.

Problem
        After login success data push into array but, not binding into scope. is there any other solution?


My question is,
For my scenario, give best practices to develop this application. kindly guide me.


On Wednesday, April 2, 2014 12:47:10 PM UTC+5:30, Sander Elias wrote: