UI5 doesn't work with AngularJS

问题:

I have a single page application written in AngularJS. I need to put a UI5 text field there (for testing purposes) that I am using with Declarative Support.

I have 2 files:

1. index.html
2. sap.html.

In my index.html I have <div class="mainView" ng-view></div> and there I inject sap.html into the index.html.

when I write this line in my index.html I see the sap text field:

<div data-sap-ui-type='sap.ui.commons.TextField' id='message' class='my-button' data-value='Hello World'></div>

However, when I put this code in sap.html the text field isn't being shown in the browser.

When I look in the chrome F12 source mode - I see that the UI5 related tag has been evaluted into textbox in the index.html. This doesn't happen in the sap.html (the "injected by angular ng-view" page) - I just see the tag "as is" - the DOM in the injected page was not evaluted.

• Why is that happening? Does AngularJS bootstrap or life cycle interfere with sap boostrap?
• Any way to fix it?

I need to use AngularJS because it is a part of an existing app. A re-write of the app is not an option for me.

Thanks

回答1:

I never came across this scenario and really do not consider this a good solution (but this is my opinion). I wonder why do you expect UI5 to be aware of AngularJS injecting markup dynamically?

However, the documentation shows an example of how to compile dynamically loaded markup. Obviously AngularJS provides an event to listen to reloads of ngView content, maybe it is possible to trigger the compliation there.