查看未注入或警告：已尝试多次加载 angular

Question

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

这是申请路线的缩减版。每个视图都与一个组件相关联。 topbar、sidebar、pageContent都是组件。

代码在主视图下方的方式没有注入 pageContent 组件，也没有错误或警告。但是注入了topbar和sidebar。

Plunker link 重现它：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>

最后，如果我将 'root' 路由更改为：（使用主视图和空模板 url）

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

然后我得到 警告：尝试多次加载 angular，但一切正常，这意味着所有视图都已注入。

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

一起使用

抱歉拖了这么久 post 但我必须提供所有细节。

Answer 1

通常 <script> 标签不在模板中解析，这是设计存在的 jqLite 实现中的简化。如中所述，在 Angular 之前加载 jQuery 将 jqLite 替换为 jQuery 并启用动态添加 <script> 节点。

plunk中看到的问题是由templateUrl: ''这段代码造成的：

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

这导致将索引页面作为模板加载，将重复的 <script> 标签添加到 DOM 并对其进行评估。如果 main 视图没有组件，它不应该在 views.

中

关于预期的行为，视图不符合 naming scheme，它可能应该是：

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

查看未注入或警告：已尝试多次加载 angular

View not injected or WARNING: Tried to load angular more than once

javascript

jquery

angularjs

angular-ui-router

angular-components