[英]How to bind controllers to generated HTML pages dynamically in AngularJS?
So far I have the ability to generate new HTML pages with PHP code. 到目前为止,我已经能够使用PHP代码生成新的HTML页面。 I already have some pages, but I can generate new with a click of a button.
我已经有一些页面了,但是我可以通过单击一个按钮来生成新页面。 It sets it up in such a way that it stores all of its information in JSON file with: name of the file, "when" component for angular route provider, the templateUrl, and a controller name.
它以一种将其所有信息存储在JSON文件中的方式进行设置:文件名,角度路由提供程序的“何时”组件,templateUrl和控制器名称。
Here is an example of JSON file: 这是JSON文件的示例:
{
"pages": [
{
"name": "index",
"when": "/",
"controller": "indexController",
"template": "views/index.html"
}
]
}
I need somehow to bind the controllers to these generated pages, so that they will point to my HTML code with ng-view . 我需要某种方式将控制器绑定到这些生成的页面,以便它们将使用ng-view指向我的HTML代码。
My HTML code has this: 我的HTML代码具有以下内容:
<div ng-view class="{{pageClass}}"></div>
My static Angular code had this (written manually, not generated dynamically): 我的静态Angular代码有以下内容(手动编写,不是动态生成):
app.config(function($routeProvider){
$routeProvider.
when('/', {
templateUrl: '/views/index.html',
controller: 'indexController'
});
app.controller('indexController', function($scope) {
$scope.pageClass = 'index';
});
The controller allowed me to insert index.html template onto the ng-view section with class="{{pageClass}}". 控制器允许我将class。{{{pageClass}}“的index.html模板插入ng-view部分。 (I also could have used ng-class="{pageClass}")
(我也可以使用ng-class =“ {pageClass}”)
Now, however, I generate the pages dynamically , which doesn't register controllers and binds the templates to the 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();
});
}]);
I get an error with this method, even though is partially works: Error: [$controller:ctrlreg] 即使部分可行 ,此方法也会出现错误: 错误:[$ controller:ctrlreg]
How do I bind my controllers in this case? 在这种情况下, 如何绑定控制器 ? It should look like this:
它看起来应该像这样:
app.controller(currentRoute.controller, function($scope) {
$scope.pageClass = currentRoute.name;
});
Seems like I had to modify the controller and turn it into a function: 似乎我必须修改控制器并将其转换为功能:
templateUrl: currentRoute.template,
controller: function($scope) {
$scope.pageClass = currentRoute.name;
}
This will paste a selected page into ng-view inside of pageClass 这会将选定的页面粘贴到pageClass内的ng-view中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.