如何加载通过AJAX jQueryUI的内容AngularJS？ [英] How to load AngularJS content via jQueryUI AJAX?
问题描述
我们的团队已经继承了从另一个办公室jQuery Mobile的项目，现在我们正试图实现使用AngularJS新功能。这个想法也是整个jQuery的网站迁移到AngularJS，一步一步。理想情况下，我们会从星在AngularJS从无到有的项目，但是这不是暂时可行的。
问题是，我们有它加载通过AJAX的标签内容jQuery的标签控制。目前所有的选项卡jQuery和我们需要实现一个新的，包装AngularJS code周围。但是，这是不工作...
我创建了一个简单的例子来说明问题。
本活生生的例子可以在这里找到：
http://ricardoamaral.net/jquery/
点击加载阿贾克斯标签，看看自己的角度变量不会更新与在角器定义的值。
从上面的例子以下是code：
的index.html
＆LT;！DOCTYPE HTML＆GT;
＆LT; HTML LANG =ENNG-应用=ngSampleApp＆GT;
＆LT; HEAD＆GT;
＆LT;间的charset =UTF-8＆GT;
＆LT;标题＆GT; jQuery UI的标签＆LT; /标题＆GT; ＆LT;链接rel =stylesheet属性HREF =HTTP：//$c$c.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css＆GT; ＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/jquery-1.9.1.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =HTTP：//$c$c.jquery.com/ui/1.10.3/jquery-ui.js＆GT;＆下; /脚本＆GT;
＆所述; SCRIPT SRC =https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js＆GT;＆下; /脚本＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =标签＆GT;
＆LT; UL＆GT;
＆LT;立GT;＆LT; A HREF =＃标签-1＆GT; preloaded＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;立GT;＆LT; A HREF =ajax.html＆GT;阿贾克斯加载＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; DIV ID =标签-1NG控制器=sampleController＆GT;
＆LT; P＆GT; PROIN ELIT arcu，rutrum commodo，vehicula腾邦，commodo一个，risus。 Curabitur NEC arcu。 Donec sollicitudin MI坐阿梅德mauris。南elementum华富ullamcorper赌注。 Etiam aliquet马萨等LOREM。 Mauris dapibus拉克丝auctor risus。 Aenean tempor ullamcorper狮子座。 Vivamus SED麦格纳QUIS ligula eleifend adipiscing。 DUIS奥奇。 Aliquam sodales tortor简历存有。 Aliquam法无。 DUIS aliquam molestie ERAT。 UT斯达康等mauris德维尔PEDE杂色山雀sollicitudin。桑达UT悲NEC奥奇tincidunt interdum。 Phasellus存有。 NUNC tristique坦帕斯lectus＆LT; / P＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
脚本：
＆LT;脚本＆GT;
$（函数（）{
$（＃标签）选项卡（）。
}）; VAR应用= angular.module（'ngSampleApp'，[]）; app.controller（sampleController，['$范围'，函数（$范围）{
$ scope.demoText =的Hello World！
}]）;
＆LT; / SCRIPT＆GT;
ajax.html
＆LT; P＆GT;＆LT;强大的方式＆gt;该含量通过AJAX＆LT加载; / STRONG＆GT;＆LT; / P＆GT;
＆所述p为H.; {{demoText}}＆下; / P＆GT;
您已经导入模板具有角前pressions问题是角度不知道在DOM新的内容。每当你从外部的角度插入HTML，你需要使用 $编译这样的角度可以处理所有前pressions和指令（包括纳克-directives ）`
下面是jQueryyUI标签集成到一个指令，使您的演示你期望的一个很简单的例子
HTML
＆LT; DIV ID =标签JQ-标签＆GT;
JS
app.directive（'jqTabs'，函数（$编译，$超时）{
返回功能（范围，ELEM，ATTRS）{
elem.tabs（{/ * initalize UI选项卡* /
使用jQueryUI的标签API / *，编译负荷事件回调*角内容/
载：函数（事件，UI）{
$超时（函数（）{
$编译（$（ui.panel）.contents（））（范围）
}）;
} }）;
}
}）
<大骨节病> 演示
Our teams have inherited a jQuery Mobile project from another office and now we are trying to implement new features using AngularJS. The idea is also to migrate the whole jQuery website to AngularJS, step by step. Ideally, we would star the project from scratch in AngularJS, but that's not feasible for the time being.
The thing is, we have a jQuery tabs control which loads its tabs content via AJAX. All the current tabs are jQuery and we need to implement a new one, wrapping AngularJS code around it. But this is not working...
I've created a simple example to demonstrate the problem.
The live example can be found here:
http://ricardoamaral.net/jquery/
Click the "Ajax Loaded" tab and see for yourself that the Angular variable is not updated with the value defined in the Angular controller.
The following is code from the example above:
index.html
<!doctype html>
<html lang="en" ng-app="ngSampleApp">
<head>
<meta charset="utf-8">
<title>jQuery UI Tabs</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.4/angular.min.js"></script>
</head>
<body>
<div id="tabs">
<ul>
<li><a href="#tabs-1">Preloaded</a></li>
<li><a href="ajax.html">Ajax Loaded</a></li>
</ul>
<div id="tabs-1" ng-controller="sampleController">
<p>Proin elit arcu, rutrum commodo, vehicula tempus, commodo a, risus. Curabitur nec arcu. Donec sollicitudin mi sit amet mauris. Nam elementum quam ullamcorper ante. Etiam aliquet massa et lorem. Mauris dapibus lacus auctor risus. Aenean tempor ullamcorper leo. Vivamus sed magna quis ligula eleifend adipiscing. Duis orci. Aliquam sodales tortor vitae ipsum. Aliquam nulla. Duis aliquam molestie erat. Ut et mauris vel pede varius sollicitudin. Sed ut dolor nec orci tincidunt interdum. Phasellus ipsum. Nunc tristique tempus lectus.</p>
</div>
</div>
</body>
</html>
Script:
<script>
$(function() {
$("#tabs").tabs();
});
var app = angular.module('ngSampleApp', []);
app.controller("sampleController", ['$scope', function($scope) {
$scope.demoText = "Hello World!"
}]);
</script>
ajax.html
<p><strong>This content was loaded via ajax.</strong></p>
<p>{{demoText}}</p>
The problem you have importing templates with angular expressions is angular is not aware of the new content in DOM. Whenever you insert html from outside angular, you need to use $compile so that angular can process all expressions and directives ( including the ng-directives)`
Here's a very simple example of integrating jQueryyUI tabs into a directive to make your demo do what you expect
HTML
<div id="tabs" jq-tabs>
JS
app.directive('jqTabs', function($compile, $timeout) {
return function(scope, elem, attrs) {
elem.tabs({/* initalize UI tabs*/
/* using jQueryUI tabs API, compile angular content in load event callback*/
load: function(event, ui) {
$timeout(function() {
$compile($(ui.panel).contents())(scope)
});
}
});
}
})
这篇关于如何加载通过AJAX jQueryUI的内容AngularJS？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
