从 angular 控制器获取渲染 html

Question

我正在使用 Angular、Ninja、HTML5 和 Javascript 开发网络。我的问题如下：我有一个 Ninja 控制器 (ProjectController)，我在其中将项目列表呈现给 HTML。我想用 Angular 的项目名称显示此列表。我看到的所有关于这个的例子，他们都是像这样手动制作列表的：

(function() {
  var app = angular.module('projectStore', []);

  app.controller('ProjectController', function(){
  this.projects = gems ;
  });

 var gems  = [
  { name: 'Azurite' },
  { name: 'Bloodstone' },
  { name: 'Zircon'}
 ];
})();

这是我的代码：

ProjectController.java

public Result getList(final FlashScope flashScope, final Session rawSession, final ProjectData registerRequest) {

    log.info("getting project List");

    List<Record1<String>> list = jCtx.jooq().select(PROJECT.PROJECT_NAME).from(PROJECT).fetch();        

    return Results.html().template("/views/ProjectController/projects.ftl.html").render("projects", list.toString());
}

已渲染 HTML projects.ftl.html

<#import "../layout/defaultLayout.ftl.html" as layout> 
<@layout.myLayout "Home page">    

<form name ="test" action="/projects" method="post" ng-app="projectStore">
<table id = "table_projects_header">
<tr>
<td>Projects</td>
<td style="padding-right:10px; padding-left:40px"> <input type="button" value=" + " onclick="addRow('table_projects')" /> </td>
<td> <input type="button" value=" - " /> </td>
</tr>
<tr id = "table_projects_list">
</tr>
</table>

<input type="submit" value="Add Project"/>

<div ng-controller="ProjectController as controller">
 <div class="project row" ng-repeat="project in controller.projects">
   <h3>
     {{project}}
   </h3>
</div>
</div>

</form>

</@layout.myLayout>

我想做这样的事情：

app.js

(function() {
   var app = angular.module('projectStore', []);

   app.controller('ProjectController',function(){
    this.projects = **get projects from rendered html** ;
   });

})();

可以吗？先谢谢了！

Answer 1

HTML

<form name ="test" action="/projects" method="post" ng-app="projectStore">
    <table id = "table_projects_header">
    <tr>
    <td>Projects</td>
    <td style="padding-right:10px; padding-left:40px"> <input type="button" value=" + " onclick="addRow('table_projects')" /> </td>
    <td> <input type="button" value=" - " /> </td>
    </tr>
    <tr id = "table_projects_list" class="renderValues">
    </tr>
    </table>

    <input type="submit" value="Add Project"/>

    <div ng-controller="ProjectController as controller">
     <div class="project row" ng-repeat="project in controller.projects">
       <h3>
         {{project}}
       </h3>
    </div>
    </div>

    </form>

你可以这样做：

(function() {
   var app = angular.module('projectStore', []);

   app.controller('ProjectController',function(){
   this.projects=[];
  //javascript way
  var elements = document.getElementsByClassName('renderValues');
 for (var index in elements)
  {
   var element = elements[index];
   this.projects.push(element.innerHTML);
  }
  //jQuery way
  /* var elements = document.getElementsByClassName('');
   $('.renderValues').each(function(){
   this.projects.push($(this).text());
   });*/
   });

})();

从 angular 控制器获取渲染 html

Getting rendering html from angular controller

html

javascript

angularjs

ninjaframework