私は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物を得ることができませんでした。
あなたはこの$スコープ[ページ]を(書くことはできません)。 。これは角度では許可されていません。 –
$ scope [page]()を使うことができます。これは私が実装したもので、関数が呼ばれています。 –