javascript - 查看未注入(inject)或警告 : Tried to load angular more than once

Question

我正在使用 ui-router 版本 v1.0.0-rc.1 和带有组件的 Angular 1.6.4。

这是应用程序路由的简化版本。每个 View 都与一个组件相关联。 topbar、sidebar 和 pageContent 都是组件。

主视图下方的代码没有注入(inject) pageContent 组件，并且没有错误或警告。但是顶栏和侧边栏被注入(inject)了。

复制它的 Plunker 链接:https://plnkr.co/edit/NedgoYEjkAxaRXRJHSoL?p=preview

    // Application routes
    $stateProvider
        .state('root', {
            url: '',
            abstract: true,
            views: {
                topbar: 'topbar',
                sidebar: 'sidebar'
            }
        })
        //children of the 'root' route
        .state('income', {
            url: '/income',
            parent: 'root',
            views: {
                main: 'pageContent'
            },
            resolve: {
                selectedModule: function () {
                    return 'income';
                }
            }
        })
        .state('outcome', {
            url: '/outcome',
            parent: 'root',
            views: {
                main: 'pageContent'
            },
            resolve: {
                selectedModule: function () {
                    return 'outcome';
                }
            }
        });

这是index.html

<ui-view name="topbar"></ui-view>
<div id="wrapper">
    <ui-view name="sidebar"></ui-view>
    <ui-view name="main"></ui-view>
</div>

pageContent.js

(function () {
    'use strict';

    angular.module('up').component('pageContent', {
        templateUrl: 'app/shared-components/page-content/page-content.component.html',
        controller: Controller,
        bindings: {
            selectedModule: '<'
        }
    });

    function Controller() {}

})();

pageContent.html(包括其他组件)

<div id="page-content-wrapper">
    <div class="container-fluid">
        <div class="row">
            <div class="col-md-12 no-padding">
                <sidemenu></sidemenu>
                <operations></operations>
                <reports></reports>
            </div>
        </div>
    </div>
</div>

最后，如果我将“根”路由更改为:(带有主视图和空模板网址)

.state('root', {
     url: '',
     abstract: true,
     views: {
        topbar: 'topbar',
        sidebar: 'sidebar',
        main: {
            templateUrl: ''
        }
    }
})

然后我得到警告:尝试多次加载 Angular ，但一切正常，这意味着所有 View 都被注入(inject)。

另一件事是，如果删除 jQuery，则不会显示上面的警告。但是，我需要 jQuery 才能将其与 angular.element 一起使用

很抱歉这篇文章很长，但我必须提供所有详细信息。

Answer 1

通常<script>标签不在模板中解析，这是设计时存在的 jqLit​​e 实现的简化。如 this answer 中所述，在 Angular 之前加载 jQuery，用 jQuery 替换 jqLit​​e 并允许添加 <script>动态节点。

plunk 中出现的问题是由 templateUrl: '' 引起的在这段代码中:

.state('root', {
    url: '',
    abstract: true,
    views: {
        topbar: 'topbar',
        sidebar: 'sidebar',
        main: {
          templateUrl: ''
        }
    }
})

这会导致将索引页面加载为模板，并添加重复的 <script>标记到 DOM 并评估它们。如果没有 main 的组件查看，它不应该在views中.

关于预期行为，该 View 不遵循 naming scheme ，可能应该是:

.state('income', {
    url: '/income',
    parent: 'root',
    views: {
        'main@': 'pageContent'
    },
    ...