Question

我正在使用Angular和UI-Router构建单页Web应用程序。在我的index.html页面中，我目前有这三个元素，一个navbar指令，一个ui-view和一个footer指令，如下所示：

<body>
    <div class="container-fluid">
        <div class="row">
            <cep-navbar></cep-navbar>
        </div>

        <ui-view></ui-view>

        <div class="row">
            <cep-footer></cep-footer>
        </div>
    </div>

    <!-- All the bower script dependencies-->
    <!-- build:js js/lib.js -->
    <!-- bower:js -->
    <!-- endbower -->
    <!-- endbuild -->

    <!-- All the custom script dependencies-->
    <!-- build:js js/app.js -->
    <!-- inject:js -->
    <!-- endinject -->
    <!-- inject:template:js -->
    <!-- endinject -->
    <!-- endbuild -->

</body>

包含navbar指令的模块按如下方式定义路径：

(function() {
    'use strict';

    angular.module('CEPAdmin.base.components')
        .config(['$stateProvider', routeConfig]);

    function routeConfig($stateProvider) {
        $stateProvider.state('search', {
            url: '/search',
            templateUrl: 'src/app/pages/search/search.html',
            controller: 'SearchController'
        });
    }
})();

我通过点击navbar指令中的一个链接来加载搜索状态，该链接在index.html页面的ui-view中注入了search.html页面。但问题是脚本标签内的脚本永远不会执行。这是我的search.html页面。

<script type="text/javascript">
      console.log('Test me');
      window.alert('Test me bro');
</script>
<h1>Hello World!!</h1>

为什么每当我的搜索状态被加载时，search.html页面中的scripts标签内的脚本都没有被执行？

链接到plunk：https://plnkr.co/edit/RaX5Jsd5zqAfbwGE0i8o

Answer 1

在进一步调查之后，我开始知道角度使用的jquery版本（jQLite）有一些DOM限制，这阻止了它在部分视图中执行脚本文件。

<强>解决方案

在index.html中引用Angular之前引用jQuery脚本。这使得angular使用jQuery而不是jQlite。这样做解决了我的问题。

当与ui-router一起使用时，html页面中脚本标记内的脚本不会被执行

1 个答案: