查看未注入或警告：尝试多次加载角度

Posted 2023-05-09

【中文标题】查看未注入或警告：尝试多次加载角度

【英文标题】：View not injected or WARNING: Tried to load angular more than once

【发布时间】：2017-09-12 07:04:56

【问题描述】：

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

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

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

复制它的 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>

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

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

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

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

抱歉，帖子太长了，但我不得不提供所有细节。

【问题讨论】：

你 在 AngularJS 之前加载 jQuery 吗？

是的，如果我在没有警告之后加载的话。但是我不能以我想要的方式使用 angular.element：jqLit​​e 不支持通过选择器查找元素！见：docs.angularjs.org/api/angular.element

这个错误的意思正是它所说的——你尝试多次加载 Angular。问题不是由这个错误引起的，但可能是由引起它的不一致引起的。需要复制才能解决。见***.com/help/mcve

谢谢@estus 我稍后会在这里发布最低工作代码。

【参考方案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 中。

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

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

【讨论】：

谢谢@estus，它就像一个魅力。我从根目录中删除了 main: templateUrl: '' 并将子视图更改为 'main@' ，就像你说的那样。再次感谢:-)

不客气。有趣的是，这个 jQuery 功能在被滥用时也会导致奇怪的错误。