2017-08-21 17 views
1

これまでのところ、私は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; 
}); 
+1

[AngularJSの複製が動的に追加され、コントローラにバインドされる方法](https://stackoverflow.com/questions/19845950/angularjs-how-to-dynamically-add-html-and-bind-to-controller) ) –

答えて

0

は、私は、コントローラを変更し、機能にそれを回す必要があったように思える:

templateUrl: currentRoute.template, 
controller: function($scope) { 
    $scope.pageClass = currentRoute.name; 
} 

これはpageClassの内側にNG-ビューに選択したページを貼り付けます

関連する問題