Reload / reload Angular app
I am working on a project with Yii2 and Angular. The structure of the code looks like this:
<html ng-app="myApp">
<head.../>
<body>
...
<div class="body-content"> MAIN CONTENT GOES HERE </div>
...
</body>
</html>
The page contains a header and column on the left and a center area that appears inside a div .body-content
. Now, as you can imagine, I have some buttons, some other angular widgets, etc.
Yii2 has a really cool feature called renderPartial
that will re-render the view file without overloading it again in <head>
and <body>
. I use this to update the content of my main area by calling this function, getting the response with jQuery and replacing the content.
Now this is causing all angular bound buttons to stop working (I'm guessing why). My question is, how can I make angular re-run or re-bind all my (new) DOM elements with their actions?
source to share
You will need to use the manual bootstrap method (explained in https://docs.angularjs.org/guide/bootstrap ) for angular, but this can leak memory over time how angular add a listener on the DOM that you are destroying and not aware of deleting so they remain, as well as for the controller / directives / bindings and other functions that your code refers to.
Can yii2 be wrapped in an angular directive?
source to share
I'm not sure if I'm right for you right - are you using a frontend framework and a backend framework to manage your interface, and the latter provides new DOM content that you inject into your HTML?
As I understand it, Angular is best at handling everything by fetching data (whether from the backend in JSON or another format of your choice), NOT new DOM elements.
Angular itself binds to whatever DOM nodes it is added to, handles content and dependency injection, and thus displays your data. In your case, the PHP backend framework seems to be using the new DOM elements that Angular thinks of "Hey, you don't want me to add these? Great, then I don't." and breaks.
There may be solutions for this particular case, but if I were you, I would rethink the concept in terms of "Where do I want my views / templates to be rendered? Which part of the whole is responsible for what?" Using two different frameworks, let alone languages, to do the same job and interfere with each other would create a mess that I wouldn't want to clean up.
So if you like this Yii2 feature and want it to work great, but in this case - why do you need Angular? And if you'd rather stick with Angular, you just have a backend that processes the data and feeds it back to the frontend to do the job with it.
source to share