2017-06-13 8 views
0

私はAngularJSを初めて使いました。私は小さなプロジェクトを進めています。AngularJS:コントローラーでHTMLを動的に読み込む

基本的には、ページの一部を動的に変更して他のファイルのHTMLを含むようにする単一ページのアプリケーションを作成したいと考えています。この他のファイルにはコントローラなどがあります。私は同じようにとどまるようにURLをしたいと思います。私は、ページを動的に変数名でロードする必要があります。

今、インポートされたテンプレートから読み込むHTMLを取得できますが、多くのHTMLは除外され、すべての「ng」タグはなくなりました。私は、この新しいページがコントローラを見つけることができないか、多くのものがコンパイルされているか何かが得られることを意味します。たぶん私は物事を正しい順序で輸入していないだろうか?何も思いつきません。ここに私の基本的なレイアウトです:

app.js

var app = angular.module('myApp', []); 
app.controller('Main', function($scope) { 
    $scope.htmlContent = 'somepage.html'; 
    $scope.externalPage = 'otherpage'; 
    $scope.changePage = function(page) { 
     $scope[page](); 
    } 
    $scope.otherpage = function() { 
     $scope.htmlContent = 'otherpage.html'; 
    } 
}); 

app.controller('InternalPage', function($scope) { 
    alert('hello world'); 
    $scope.content = "This is not showing"; 
}); 

index.htmlを

<div ng-controller="Main"> 
    <!-- This all works. Clicking "Change Page" changes the 
     HTML referenced by the <div> tag --> 

    <a ng-click="changePage(externalPage)">Change Page</a> 
    <div ng-bind-html="htmlContent"></div> 
</div> 

otherpage.html

<div ng-controller="InternalPage"> 
    <p>{{content}}</p> 
</div> 

私は役に立たないためにHTMLファイル自体にjavascriptを含めてみました。私はまた、仕事にng-include物を得ることができませんでした。

+0

あなたはこの$スコープ[ページ]を(書くことはできません)。 。これは角度では許可されていません。 –

+0

$ scope [page]()を使うことができます。これは私が実装したもので、関数が呼ばれています。 –

答えて

0

はに探して試してみてください代わりに、NG-バインドHTMLのNG-含ま: https://www.w3schools.com/angular/angular_includes.asp

+0

コントローラをapp.jsの中に置くと、読み込んだファイルを読み込めるようになりますか?または、私は含まれているファイルの中にjavascriptを入れなければなりませんか? –

+0

はい。 ng-includeは、ファイルの内容をインクルードする場所に挿入します。そのため、ファイルの前のインポートはそこにアクセスできます。 – AllAnimals

関連する問題