Restart/reload Angular app

Question

I'm working on a project with Yii2 and Angular. The structure of the code is as follows:

<html ng-app="myApp">

    <head.../>
    <body>
        ...
        <div class="body-content"> MAIN CONTENT GOES HERE </div>
        ...
    </body>

</html>

The page contains a header and a column on the left and a center area which is rendered inside the .body-content div. Now, as you can imagine, I have some buttons in there, some other angular widgets, etc..

Yii2 has a really cool feature called renderPartial that will re-render a view file without wrapping it again in the <head> and <body>. I use that to update the content of my main area, by calling that function, getting the response with jQuery and replacing the content.

Now, that causes all buttons that where binded with Angular 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 to their actions?

http://stackoverflow.com/questions/14994391/thinking-in-angularjs-if-i-have-a-jquery-background — adt, Jun 09 '15 at 22:44
@adt No. I'm not re-writing all the widgets that Yii is offering me just because Angular can't reload itself. — alexandernst, Jun 09 '15 at 22:46

score 2 · Answer 1 · answered Jun 09 '15 at 22:45

2

You would have to use the manual bootstrap way (explained in https://docs.angularjs.org/guide/bootstrap) for angular but doing that would cause a memory leak over time as angular add listener on DOM that you destroy and is not aware of it's removal, so they stay, and so does for the controller / directives / binding and other features that are referenced by your code.

Is yii2 could be wrapped into an angular directive?

answered Jun 09 '15 at 22:45

zeachco

754
4
16

Not really sure how that would work. Yes, I can wrap whatever I want in a directive, but what would that do? Or do you mean wrapping the entire content of `body-content` in a directive? – alexandernst Jun 09 '15 at 22:48
I don't know much about yii2 framework but I assume it's a javascript librairy that you can specify what to render with some sorts of templates you could register a directive in angular that replace `body-content` and render the internal with the yii2 frameworks as normal, the you could rerender the angular directive like it's explained in http://stackoverflow.com/questions/22080351/how-to-re-render-a-template-in-an-angular-directive and angular would take care of analysing the html attributes and and do it's magic. – zeachco Jun 09 '15 at 22:59
@VladTheLad thanks for noticing the Yii2 was a backend rendering framework, this is more conflicting than I expected. Better to choose one or the other otherwise you would walk a very difficult and hacky path to make that work. Maybe Yii2 could render angular templates used in the application – zeachco Jun 09 '15 at 23:14

score 0 · Answer 2 · answered Jun 09 '15 at 23:09

I am not sure if I am getting you right - you use a frontend framework AND a backend framework to control your frontend, the latter one deliveres new DOM content you inject into your HTML?

As far as I got it, Angular is best in handling everything while getting the data (be it from the backend in JSON or other format of your choice), NOT new DOM elements.

Angular itself binds to whatever DOM nodes it is added to, handles the content and dependency injection and thus displays your data. In your case the backend PHP framework seems to hand in new DOM elements that Angular thinks of "Hey - you don't want me to be adding them? fine, then I don't." and breaks.

Maybe there are solutions for this specific case, but if I were you I would rethink the concept in terms of "Where do I want my views/templates to be rendered? What part of the whole is responsible for what?" Using two different frameworks, let alone languages, to do the same job and interfering with one another would make a mess I wouldn't want to clean up.

So if you like this Yii2 feature and want to make it work, fine - but in that case - what do you need angular for? And if you'd rather stick to Angular you just have a backend that handles data and hands it back to the frontend to do it's job with it.

I'm using Yii2 for the majority of stuff and Angular for handling some edge cases where it would be easier to control the user in put with Angular rather than with Yii2. I'm doing so because it's faster and easier (don't forget that Angular is still DIY with tons of directives, while Yii2 has tons of ready-to-use stuff). — alexandernst, Jun 10 '15 at 06:31
Mh, I am still quite sure you would be better off without Angular (from all what I hear React might be your best candidate, havent worked with it though) in that case - if input control is what you seek, a full blown MVVC is maybe not the best choice. ;) — VladTheLad, Jun 10 '15 at 18:38

Restart/reload Angular app

2 Answers2