Scraped data contains jquery conflicting with angular app

Question

The Scenario-:

I am scraping a website go display a form inside my angular application. I am using php to scrape this data, Which send me the html as a string through a rest api.

Inside my angular application i use $sce.trustAsHtml(scrappedView) to compile the string to html and display the actual form on my application dashboard.

Now the problem-:

The page which is scraped from another website contains jQuery 1.11.0, My application uses angular 1.4.

When the view is loaded inside my app no functionality/operation inside the form work. However on doing a POC inside a jquery application the for works perfectly fine.

My guess is that the jQuery and angular are conflicting due to the same Identifier($). Is their a way where i can avoid this conflict through angularjs, or any workarounds at all.

score 1 · Answer 1 · answered Feb 23 '17 at 14:17

1

do you have access to the source code of the scrapped page? then you can you change the jquery to no conflict mode: https://api.jquery.com/jquery.noconflict/

answered Feb 23 '17 at 14:17

Dominik Heim

119
7

you can also share link and i can check directly inside code. – Dominik Heim Feb 23 '17 at 14:20
I do not really have complete control over scrapped data, This can be done if i append $.noConflict() to all the scripts using jquery, Not a scalable solution though – Somangshu Goswami Feb 23 '17 at 14:33

score 0 · Answer 2 · answered Feb 23 '17 at 15:15

0

From Angular's documentation:

AngularJS 1.3 only supports jQuery 2.1 or above. jQuery 1.7 and newer might work correctly with AngularJS but we don't guarantee that.

You'd have to upgrade jQuery.

However, I couldn't find anything about Angular 1.4.

answered Feb 23 '17 at 15:15

Condorcho

503
4
12

Check [this](http://stackoverflow.com/questions/7882374/how-do-i-implement-jquery-noconflict). It defines jQuery's `.noConflict()` **after** including the jQuery library (not necessarily editing the jQuery script) and before any custom script. Maybe it can help you. – Condorcho Feb 23 '17 at 16:04
.noConflict will definitely work if i wrap the jquery code inside a function block and define noConflict with it. Rite now i do not have any control over the script which is inside scrapped data. Anyways trying the above method also did not work. – Somangshu Goswami Feb 24 '17 at 05:38

Scraped data contains jquery conflicting with angular app

The Scenario-:

Now the problem-:

2 Answers2