jQuery load #div from page that has AngularJS content

Question

EDIT Ok, guys thank you all. I now got that my approach was wrong and that jQuery and AngularJS architectures don't really bode well together. I will try to approach it with pure AngularJS way(the purpose of this was to learn Angular). You are a nice community.

I know that some people have asked something similar again, but I didn't find any solution. I am quite new in AngularJS(seems awesome btw), but I am a bit confused on how to do some basic stuff.

I want to click a button and load a div from another page. That div is populated from AngularJS MV.

My jQuery code

$('#nav li').click(function(){
    var elemt = $(this).html().toLowerCase();
    $('#main_descr').html('');
    $('#dynamic').remove();
    $('#main_descr').load( 'moar.php #'+elemt, function(){
        //what should I do?
    });

});

a portion of my "AngularJS moar.php"(for example this div is getting loaded)

<div id="skills" class="more_info" ng-controller="skillsList">
<h2>Skills</h2>

<section ng-repeat="skill in skills">
    <h3>{{skill.title}}</h3>
    <ul>
        <li ng-repeat="partskill in skill.skillz">{{partskill.name}}</li>
    </ul>
</section>

my controller(note that I haven't declared an app. I load )

function skillsList($scope) {

$scope.skills = [
{'title': 'Science & Engineering',
 'skillz' : [
                {'name' : 'Software engineering'},
                {'name' : 'Operating Systems'},
                {'name' : 'Bio - Informatics'},
                {'name' : 'Algorithms'},
                {'name' : 'Optimization'},
                {'name' : 'RESTful services'},
                {'name' : 'Digital Design'},
                {'name' : 'Electronics'},
                {'name' : 'Wireless Sensors'},
                {'name' : 'OpNet'},
                {'name' : 'Simulations'},
                {'name' : 'Mathematics(applied, analysis etc.)'}
            ]},
{'title': 'Coding',
 'skillz' : [
                {'name' : 'Java'},
                {'name' : 'Android'},
                {'name' : 'C++'},
                {'name' : 'C'},
                {'name' : 'Python'},
                {'name' : 'Javascript'},
                {'name' : 'jQuery'},
                {'name' : 'AngularJS'},
                {'name' : 'PHP5'},
                {'name' : 'SQL'},
                {'name' : 'CSS3'},
                {'name' : 'HTML5'},
                {'name' : 'Matlab'},
                {'name' : 'ns'}
            ]},
{'title': 'Languages',
 'skillz' : [
                {'name' : 'English', 'extra' : 'Proficient'},
                {'name' : 'Greek', 'extra' : 'Native'},
                {'name' : 'Swedish', 'extra' : 'Basic'}
            ]}
];
}

I would love some advice, please. Help the newbie

Why are you mixing jQuery and angular? Why not try ng-click=""? — Matt Way
– Matt Way, Commented Feb 2, 2014 at 16:00
I didn't know how to take the html from the <li> so I can load the proper div. I am really new to Angular — MayTheSchwartzBeWithYou
– MayTheSchwartzBeWithYou, Commented Feb 2, 2014 at 16:02
Your best bet is to look into how to use routing and views. Did you go through the tutorial? Jumping right in without doing some sort of tutorial that covers controllers, views, routing, service, and directives (probably filters too) is a disservice to yourself. — gonzofish
– gonzofish, Commented Feb 2, 2014 at 16:06
yeah, few weeks ago. Maybe I should redo it. Although, routing seems not to exactly fit what I need(at least how I tried it with guide this jsfiddle.net/pXpja/3), I will look at it again. — MayTheSchwartzBeWithYou
– MayTheSchwartzBeWithYou, Commented Feb 2, 2014 at 16:21

Matt Way · Accepted Answer · 2014-02-02 16:17:16Z

3

Here is a simplified fiddle, using your html and ng-click to perform an action upon clicking on the lis:

http://jsfiddle.net/Yryzt/

Clicking on them should make them lowercase. No jQuery used :)

answered Feb 2, 2014 at 16:17

Matt Way

33.3k10 gold badges85 silver badges86 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

MayTheSchwartzBeWithYou Over a year ago

I will check it out in few mins. However. How do I make it load in a page? I have index.php and I want to load into "#content" a corresponding div from the page "moar.php"

Matt Way Over a year ago

I'm not sure I understand you. Angular should be used to create single page applications. You use routing and partials to build the app, and usually only need to create a single index.html that the client loads. Checkout egghead.io for some beginner tutorials.

Veco · Accepted Answer · 2014-02-02 16:20:52Z

2

Mixing AngularJS with JQuery is not a good approach. Angular is good enough to cover all your needs. With your problem I would suggest that you try adding an angular ng-include. This directive allows you to inject "HTML Pages", however, I think you will need to tweak your app a little bit.

answered Feb 2, 2014 at 16:20

Veco

1801 silver badge6 bronze badges

1 Comment

Dorian Over a year ago

Any code example on how to dynamically include HTML with ng-include?

Collectives™ on Stack Overflow

jQuery load #div from page that has AngularJS content

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related