ビューが挿入されていないか、または警告：角度が複数回表示されようとしました

Question

ui-routerのバージョンv1.0.0-rc.1とコンポーネント1.6.4を使用しています。

アプリケーションルートの縮小バージョンです。各ビューはコンポーネントに関連付けられています。トップバー、サイドバー、およびpageContentはすべてコンポーネントです。

コードがメインビューの下にある方法は、pageContentコンポーネントが挿入されていないため、エラーや警告はありません。しかし、トップバーとサイドバーが注入されます。

それを再現する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: '' 
     } 
    } 
}) 

はその後、私は警告を得る：回角度以上をロードしようとしましたが、すべてが機能し、すべてのビューが注入されます。

jQueryを削除すると、上記の警告は表示されません。しかし、私はjQueryをangle.elementと一緒に使用する必要があります

申し訳ありませんが長いポストですが、私はすべての詳細を述べなければなりませんでした。

Answer 1

通常、<script>タグはテンプレートで解析されません。これは、設計上存在するjqLit​​e実装の単純化です。 this answerで説明したように、Angularより前にjQueryをロードすると、jqLit​​eがjQueryに置き換えられ、<script>ノードを動的に追加できます。 plunkで見

問題は、コードのこの部分でtemplateUrl: ''によって引き起こされる：

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

これは、DOMへ<script>タグを複製追加し、それらを評価し、テンプレートとしてロードインデックスページになります。 mainビューのコンポーネントがない場合は、viewsには含まれません。

予想される動作についてビューがnaming schemeに従っていない、それはおそらく次のようになります。

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