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

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

1 个答案: