Question

我们的团队从另一个办公室继承了一个jQuery Mobile项目，现在我们正在尝试使用AngularJS实现新功能。这个想法也是一步一步地将整个jQuery网站迁移到AngularJS。理想情况下，我们会在AngularJS中从头开始为项目加注星标，但这暂时不可行。

问题是，我们有一个jQuery选项卡控件，它通过AJAX加载其选项卡内容。所有当前选项卡都是jQuery，我们需要实现一个新的选项，围绕它包装AngularJS代码。但这不起作用......

我创建了一个简单的例子来演示这个问题。

可以在此处找到实时示例：

http://ricardoamaral.net/jquery/

单击“Ajax Loaded”选项卡，自行查看Angular变量未使用Angular控制器中定义的值进行更新。

以下是上述示例中的代码：

的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>
    $(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>

Answer 1

使用角度表达式导入模板的问题是angular不知道DOM中的新内容。无论何时从外角插入html，都需要使用$compile，以便angular可以处理所有表达式和指令（包括ng-directives）`

这是一个将jQueryyUI选项卡集成到指令中以使您的演示符合预期的非常简单的示例

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)
        });
      }

    });
  }
})

的 DEMO

如何通过jQuery AJAX加载AngularJS内容？

1 个答案: