Question

我正在尝试编写一个简单的CMS系统，其中每个页面的内容都存储在数据库中。当用户尝试访问

时

/pages/abc.html

通过角度路由和控制器从数据库中检索该页面的内容并动态生成abc.html。我发现一种方法是向templateUrl添加一个函数来返回页面：

  .when('/content/pages/:name*', {
    templateUrl: function(parameters) {
      return '/pages/' + parameters.name + '.html';
    },
    controller: 'ContentCtrl',
    controllerAs: 'content'
  })

然而问题是我需要让abc.html已经存在然后在控制器中编译DOM内容并附加它。我要做的是不要让abc.html已经存在，而是在运行中生成。通过这种方式，我可以允许我的用户添加xyz内容，当他们尝试访问xyz.html时，它将会存在，而无需事先创建xyz.html模板html。有没有什么方法可以用来达到这个目的。

Answer 1

我为此做的是编写自定义指令。我将指令传递给包含与ui元素对应的对象的数组。对象在JS中定义，并且都有我编写的.html（）函数，它根据对象属性生成一些html。然后存储/恢复结构你只需JSON.stringify对象将其插入到DB和JSON.parse中以使对象返回...只有棘手的部分是你需要将数据类型存储为对象的属性所以你可以选择正确的类型。

指令本身只调用每个对象上的html（）函数并连接输出然后设置元素的innerHTML。

Answer 2

你有什么理由需要生成parameters.name html文件吗？我认为您可以定义模板，然后将html传递给控制器。如果存在大量重复逻辑，则可以创建内容组件或指令。

Answer 3

我意识到我可以使用template属性插入我想要的任何html。

  .when('/content/pages/:name*', {
    template: function(parameters) {
      return 'hello' + parameters.name;
    },
    controller: 'ContentCtrl',
    controllerAs: 'content'
  })

Answer 4

您可以做什么将模板名称作为参数传递给控制器：

  .when('/content/pages/:name*', {
    templateUrl: function(parameters) {
      return '/pages/:templateName';
    },
    controller: 'ContentCtrl',
    controllerAs: 'content'
  })

在控制器中，创建所需的HTML（如果不存在），然后在模板中使用ng-include包含HTML：

<div ng-include="template.url" ng-if="template.url"></div>

angular动态生成html文件

4 个答案: