これまでのところ、私はPHPコードで新しいHTMLページを生成する能力を持っています。すでにいくつかのページがありますが、ボタンをクリックするだけで新しいページを生成できます。これは、JSONファイルにすべての情報を格納するように設定します。ファイル名、角度ルートプロバイダの「when」コンポーネント、templateUrl、およびコントローラ名を指定します。ここでAngularJSで動的に生成されたHTMLページにコントローラをバインドするには?
は、JSONファイルの例です:
{
"pages": [
{
"name": "index",
"when": "/",
"controller": "indexController",
"template": "views/index.html"
}
]
}
私は、彼らがNG-ビューと私のHTMLコードをポイントするように、これらの生成されたページにコントローラをバインドする何とか必要があります。
マイHTMLコードは、これを持っている:
<div ng-view class="{{pageClass}}"></div>
マイ静的な角度コードは(動的に生成されていない、手動で書かれた)、これを持っていた:
app.config(function($routeProvider){
$routeProvider.
when('/', {
templateUrl: '/views/index.html',
controller: 'indexController'
});
app.controller('indexController', function($scope) {
$scope.pageClass = 'index';
});
コントローラは、私は、インデックスを挿入することができ.htmlテンプレートをclass = "{{pageClass}}"のng-viewセクションに追加します。 (私もNG-クラスを使用することもできました=「{pageClass}」)
は今、しかし、私は、ページのコントローラを登録し、pageClassにテンプレートを結合していない動的を生成:
var app = angular.module('myApp', ['ngRoute']);
var $routeProviderReference;
app.config(['$routeProvider', function($routeProvider) {
$routeProviderReference = $routeProvider;
}]);
app.run(['$route','$http','$rootScope',function($route, $http, $rootScope){
$http.get('temp.json') // load data
.then(function(data){
var result = data.data.pages; // data from JSON file
var i;
var currentRoute;
for (i = 0; i< result.length; i++){ // for every existing HTML page
currentRoute = result[i];
var routeName = currentRoute.when;
$routeProviderReference.when(routeName, { // assign template and controller
templateUrl: currentRoute.template,
controller: currentRoute.controller
});
}
$route.reload();
});
}]);
私は部分的に動作しているにもかかわらず、この方法でエラーを取得する:エラー:[$コントローラ:CTRLREG]
は、どのように私はこのケースでは、私のコントローラをバインドしていますか?それは次のようになります。
app.controller(currentRoute.controller, function($scope) {
$scope.pageClass = currentRoute.name;
});
[AngularJSの複製が動的に追加され、コントローラにバインドされる方法](https://stackoverflow.com/questions/19845950/angularjs-how-to-dynamically-add-html-and-bind-to-controller) ) –