javascript - jQuery 从具有 AngularJS 内容的页面加载 #div

Question

编辑好的，谢谢大家。我现在发现我的方法是错误的，并且 jQuery 和 AngularJS 架构并不能很好地结合在一起。我将尝试用纯粹的 AngularJS 方式来处理它(这样做的目的是学习 Angular)。你们是一个很好的社区。

我知道有些人又问了类似的问题，但我没有找到任何解决方案。我对 AngularJS 很陌生(顺便说一句，看起来很棒)，但我对如何做一些基本的事情有点困惑。

我想单击一个按钮并从另一个页面加载一个 div。该 div 是从 AngularJS MV 填充的。

我的 jQuery 代码

$('#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?
    });

});

我的“AngularJS moar.php”的一部分(例如这个div正在加载)

<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>

我的 Controller (请注意，我尚未声明应用程序。我加载)

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'}
            ]}
];
}

请给我一些建议。帮助新手

Answer 1

这是一个简化的 fiddle ，使用您的 html 和 ng-click 在单击 li 时执行操作:

http://jsfiddle.net/Yryzt/

点击它们应该将它们变成小写。没有使用 jQuery :)