jQuery从包含AngularJS内容的页面加载#div

时间:2014-02-02 15:59:02

标签: javascript jquery html angularjs lazy-loading

编辑好的,大家好,谢谢大家。我现在知道我的方法是错误的,并且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>

我的控制器(注意我还没有申报。我加载了)

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

我会喜欢一些建议。帮助新手

2 个答案:

答案 0 :(得分:3)

这是一个简化的小提琴,使用您的html和ng-click点击li时执行操作:

http://jsfiddle.net/Yryzt/

单击它们应该使它们小写。没有使用jQuery:)

答案 1 :(得分:2)

将AngularJS与JQuery混合不是一个好方法。 Angular足以满足您的所有需求。有了您的问题,我建议您尝试添加角度ng-include。该指令允许您注入“HTML页面”,但是,我认为您需要稍微调整一下您的应用程序。