Question

从我有一个包含模板数组的服务器端变量modules的场景中：

    modules = ["module1.html","module2.html","module3.html"];

假设服务器提供以下内容：

我在这里使用twig作为PHP，但想象一下你可能使用的服务器端代码

    {% for module in modules %}
        {% include ("modules/" ~ module) ignore missing %}
    {% endfor %}

这将为我提供module1.html，module2.html和module3.html连接的内容。

等效的AngularJS代码是：

    <div 
        ng-repeat="module in modules track by $index" 
        ng-include="'modules/' + module">
    </div>

现在，我想要的是拥有此ngRepeat的服务器端呈现版本。

如果我这样做：

    {% for module in modules %}
        <div 
            ng-repeat="module in modules track by $index" 
            ng-include="'modules/' + module">

        {% include ("modules/" ~ module) ignore missing %}

        </div>
    {% endfor %}

然后当Angular启动时，我会在页面上有modules.length * modules.length个模块，这是不可接受的。

如何让Angular 接管该列表，并在其上引入ngRepeat指令，而不会将结果乘以？换句话说，如何使用服务器端引导数据呈现ngRepeat指令而不依赖于角度来进行编译？

更新

我刚刚使用模板找到了a partial solution：

    <div ng-include="'modules'">
        {% for module in modules %}
            {% include ("modules/" ~ module) ignore missing %}
        {% endfor %}
    </div>

    <script type="text/ng-template" id="modules">
        <div 
            ng-repeat="module in modules track by $index" 
            ng-include="'modules/' + module">
        </div>
    </script>

哪种方式有效，但我正在寻找不同的选择。

Answer 1

尝试使用这个npm包，它将渲染任何角度模板：

https://www.npmjs.com/package/ng-node-compile

var ngcompile = require('ng-node-compile');
var ngEnviorment = new ngcompile();
ngEnviorment.$compile("<div ng-repeat=\"n in [1,2,3,4,5]\">hello {{name}} {{n}}</div>")({ name: 'Jhon doe' });

AngularJS服务器端渲染ngRepeat指令

更新

1 个答案: