web-dev-qa-db-ja.com

シンプルなng-includeが機能しない

私は初めてAngularJSで遊んでおり、ヘッダーとフッターにng-includeを使用するのに苦労しています。

これが私のツリーです。

myApp
assets
   - CSS
   - js
        - controllers
        - vendor
             - angular.js
             - route.js
             ......
             ......
             ......
        main.js
pages
   - partials
        - structure
              header.html
              navigation.html
              footer.html
   index.html
   home.html

index.html：

<!DOCTYPE html>
<html ng-app="app">
<head>
    <title>AngularJS Test</title>

    <script src="/assets/js/vendor/angular.js"></script>
    <script src="/assets/js/vendor/route.js"></script>
    <script src="/assets/js/vendor/resource.js"></script>
    <script src="/assets/js/main.js"></script>

</head>
    <body>          

        <div ng-include src="partials/structure/header.url"></div>
        <div ng-include src="partials/structure/navigation.url"></div>    

        <div id="view" ng-view></div>   

        <div ng-include src="partials/structure/footer.url"></div>
    </body>
</html>

main.js

var app = angular.module("app", ["ngResource", "ngRoute"]);


app.config(function($routeProvider) {

$routeProvider.when("/login", {
    templateUrl: "login.html",
    controller: "LoginController"
});

$routeProvider.when("/home", {
    templateUrl: "home.html",
    controller: "HomeController"
});

$routeProvider.otherwise({ redirectTo: '/home'});

});

app.controller("HomeController", function($scope) {
    $scope.title = "Home";
});

home.html

<div>
<p>Welcome to the {{ title }} Page</p>
</div>

Home.htmlページに移動すると、ヘッダー、ナビゲーション、フッターが表示されません。

javascripthtmlangularjsangularjs-scope
67
Oam Psy

ヘッダーのインクルードを行っています。rlヘッダーの代わりに。html。 src属性でリテラルを使用するように見えるので、@ DRiFTyのコメントで言及されているように、リテラルを引用符で囲む必要があります。

変化する

 <div ng-include src="partials/structure/header.url"></div>
 <div ng-include src="partials/structure/navigation.url"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="partials/structure/footer.url"></div>

に

 <div ng-include src="'partials/structure/header.html'"></div>
 <div ng-include src="'partials/structure/navigation.html'"></div>    

 <div id="view" ng-view></div>   

 <div ng-include src="'partials/structure/footer.html'"></div>

これが機能しない場合、404がある場合はブラウザコンソールを確認してください

144
Pieter Herroelen

レンダリングしない単純なng-includeで同様の問題が発生しました。

<div ng-include="views/footer.html"></div>

ファイルパスを一重引用符で囲み、レンダリングします。

<div ng-include="'views/footer.html'"></div>

96
cfranklin

ここに着陸した同様の問題がありました。

ng-includeはパーシャルの内容を入力していませんでしたが、コンソールエラーも404もありませんでした。

それから私は自分がやったことを実現しました。

私のための修正：ng-appの外側にng-includeがあることを確認してください！とても明白です。 Angular noobの価格。

18
GraehamF

私は同じ問題に苦しんでおり、異なるスタックでアドバイスされたほとんどすべてを実行しましたが、それはうまくいきませんでした。コンソールで、エラーが発生しました：

「Cross Originリクエストは、プロトコルスキームでのみサポートされています：http、data、chrome、chrome-extension、https、chrome-extension-resource。」

後で気づいたのですが、ローカルWebサーバー（MAMP、WAMPなど）を使用して動作させる必要があります。

上記のエラーメッセージに注意してください。ウェブサイトの運営にローカルウェブサーバーを使用していない可能性があります。

2
Muhammad Ali Mansoor

私はこれを見つけました！

私にとっては、CDNを使用してangle.min.jsファイルをインポートしていましたが、明らかに機能していませんでした。私はに切り替えました：

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script>

bodyタグにng-app=""を含めました：

<body ng-app="">
<div ng-include="'testfile.html'"></div>

そして、今はうまく機能しています。乾杯！

2
FiringBlanks

私もこの問題に出会いました。そして、これは私のために働いたものです。

したがって、これを書く代わりに：<div ng-include="'html/form.htm'"></div>

ng-app=""を追加します。したがって、次のようになります：<div ng-app="" ng-include="'html/form.htm'"></div>

2
Tim Anishere

はい、''なしで、ngはng-include("")内のコンテンツを評価しようとします

この評価は、{{}}をこれらのディレクティブに入れないもう1つの理由です。

1
Achuth I

ng-includeはchromeおよびExplorerでは機能しませんが、Firefoxでは機能するため、互換性の問題である可能性があります。確認するには、FirefoxまたはEdgeまたは別のブラウザーでレポートを生成してください。

1
Himesh V R

私も似たような問題を抱えていました：愚かな間違いがITを引き起こしていました、私はtextArea EGの下にいました：

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" > `

正しく閉じられなかった以下を修正：

<textarea cols="3" type="text" id="WarehouseAddress"  class="form-control" ></textarea> 

<div ng-switch="vm.frmDOA.isGenerateDebitNote">
                <ng-include src="vm.showupload()"></ng-include>
            </div>

それを投稿することは、私が時間をかけて解決するのに役立つかもしれません....

0
Sunil Pandey