Question

到目前为止，我可以使用PHP代码生成新的HTML页面。我已经有了一些页面，但只需点击一下按钮即可生成新页面。它以这样的方式设置它：它将所有信息存储在JSON文件中：文件名，＆＃34;当＆＃34;角度路由提供程序的组件，templateUrl和控制器名称。

以下是JSON文件的示例：

{
  "pages": [
    {
    "name": "index",
    "when": "/",
    "controller": "indexController",
    "template": "views/index.html"
    }
  ]
}

我需要以某种方式将控制器绑定到这些生成的页面，以便他们使用 ng-view 指向我的HTML代码。

我的 HTML 代码包含：

  <div ng-view class="{{pageClass}}"></div>

我的静态Angular 代码有这个（手动编写，不是动态生成的）：

app.config(function($routeProvider){
$routeProvider.
when('/', {
  templateUrl: '/views/index.html',
  controller: 'indexController'
});
app.controller('indexController', function($scope) {
  $scope.pageClass = 'index';
});

控制器允许我使用class =＆＃34; {{pageClass}}＆＃34;将index.html模板插入ng-view部分。（我也可以使用ng-class =＆＃34; {pageClass}＆＃34;）

然而，现在我生成了动态页面，它们没有注册控制器并将模板绑定到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();
  });
}]);

我使用此方法出错，即使部分有效：错误：[$ controller：ctrlreg]

在这种情况下，

如何绑定我的控制器？它应该是这样的：

app.controller(currentRoute.controller, function($scope) {
  $scope.pageClass = currentRoute.name;
});

Answer 1

似乎我必须修改控制器并将其转换为函数：

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

这会将所选页面粘贴到 pageClass

内的ng-view中

如何在AngularJS中动态地将控制器绑定到生成的HTML页面？

1 个答案: