运行 jQuery ng-bind-html 上的代码

Question

我有一个变量，其中包含一些 HTML+CSS+JavaScript 代码，如下所示：

<ul class="tabs">
   <li data-tab="tab1">Item 1</li>
   <li data-tab="tab2">Item 2</li>
</ul>
<div id="tab1"></div>
<div id="tab2"></div>
<script src="http://codepen.io/assets/libs/fullpage/jquery.js"></script>
<script>
$(document).ready(function(){
    $('ul.tabs li').click(function(){
        var tab_id = $(this).attr('data-tab');
        $('ul.tabs li').removeClass('current');
        $('.tab-content').removeClass('current');
        $(this).addClass('current');
        $("#"+tab_id).addClass('current');
    })
})
</script>

现在我想要运行我的页面中的这段代码，所以在模板中我写了：

<ion-view>
    <ion-content >
        <div ng-bind-html="data"></div>
    </ion-content>
</ion-view>

在我的控制器中我写道：

$scope.data = $sce.trustAsHtml(that variable);

好的，一切正常，所有 CSS 和 HTML 都会加载，但是 javascript 代码无法工作，所以我在 Google 中搜索并找到了这段代码: http://jsfiddle.net/NWZZE/6/

所以我更改了代码并添加了 directive，如下所示：

.directive('compile', ['$compile', function ($compile) {
        return function(scope, element, attrs) {
            scope.$watch(
                function(scope) {
                    // watch the 'compile' expression for changes
                    return scope.$eval(attrs.compile);
                },
                function(value) {
                    // when the 'compile' expression changes
                    // assign it into the current DOM
                    element.html(value);

                    // compile the new DOM and link it to the current
                    // scope.
                    // NOTE: we only compile .childNodes so that
                    // we don't get into infinite loop compiling ourselves
                    $compile(element.contents())(scope);
                }
            );
        };
    }])

然后使用 compile 而不是 ng-bind-html 但是我的 javascript 代码还不能工作！

Answer 1

AngularJS 使用 jqLite，jQuery 的一个小子集。你的问题是 jqLite 不支持脚本标签。 AngularJS 团队决定不实现它，因为让它在所有支持的浏览器上运行涉及大量代码。

jQuery 但是支持脚本标签。所以要让它工作，你需要在 AngularJS 之前加载 jQuery，这将使 AngularJS 使用 jQuery 而不是 jqLite。

这意味着下面这行当然是多余的，可以删除：

<script src="http://codepen.io/assets/libs/fullpage/jquery.js"></script>

演示： http://plnkr.co/edit/Pjg0ZrGmDD8WfG4tqXxG?p=preview

运行 jQuery ng-bind-html 上的代码

run jQuery codes on ng-bind-html

javascript

angularjs

ionic-framework