Question

我正在寻找一种将ng-repeat等内容与静态内容集成的方法。也就是说，发送静态div并将它们绑定到JS数组（或者更确切地说，从内容构造一个数组，然后然后绑定到它）。

我意识到我可以发送静态内容，然后删除并重新生成动态位。我不想两次写相同的div。

目标不仅是满足搜索引擎和没有js的人，而且要在静态网站和单页应用程序之间取得健康的平衡。

Answer 1

我不确定这是否与您的意思完全相同，但有趣的是尝试。

这个指令基本上是通过收集与ng-bind绑定的属性为每个子节点创建一个项目。完成后，它只留下第一个孩子作为ng-repeat的模板。

指令：

var app = angular.module('myApp', []);

app.directive('unrepeat', function($parse) {
    return {
        compile : function (element, attrs) {

            /* get name of array and item from unrepeat-attribute */
            var arrays = $parse(attrs.unrepeat)();
            angular.forEach(arrays, function(v,i){
                this[i] = [];

                /* get items from divs */
                angular.forEach(element.children(), function(el){
                    var item = {}

                    /* find the bound properties, and put text values on item */
                    $(el).find('[ng-bind^="'+v+'."]').each(function(){
                        var prop = $(this).attr('ng-bind').split('.');

                         /* ignoring for the moment complex properties like item.prop.subprop */
                        item[prop[1]] = $(this).text();
                    });
                    this[i].push(item);
                });
            });

            /* remove all children except first */
            $(element).children(':gt(0)').remove()

            /* add array to scope in postLink, when we have a scope to add it to*/
            return  function postLink(scope) {
                angular.forEach(arrays, function(v,i){
                    scope[i] = this[i];
                });
            }
        }
    };
});

用法示例：

<div ng-app="myApp" >
    <div unrepeat="{list:'item'}" >
        <div ng-repeat="item in list">
            <span ng-bind="item.name">foo</span>
            <span ng-bind="item.value">bar</span>
        </div>
        <div ng-repeat="item in list">
            <span ng-bind="item.name">spam</span>
            <span ng-bind="item.value">eggs</span>
        </div>
        <div ng-repeat="item in list">
            <span ng-bind="item.name">cookies</span>
            <span ng-bind="item.value">milk</span>
        </div>
    </div>
    <button ng-click="list.push({name:'piep', value:'bla'})">Add</button>
</div>

可以推测那些重复的divs是由PHP或其他后端应用程序在循环中创建的，因此我将ng-repeat放在所有这些中。

http://jsfiddle.net/LvjyZ/

（注意，$（）有一些多余的用法，因为我没有按正确的顺序加载jQuery和Angular，而角度jqLite上的.find缺少一些功能。）

Answer 2

你真的只有一个选择：

使用the approach described here

问题是你需要基本上重写所有指令以支持从DOM加载他们的数据，然后以某种方式加载他们的模板，而不会让它们显示在DOM中。

作为替代方案，您可以使用React而不是Angular进行调查，这可以用来直接在Web服务器上呈现内容而不使用像phantomjs这样繁重的设置。

AngularJS在服务器生成的内容之上

2 个答案: