javascript - 服务器生成内容之上的 AngularJS

Question

我正在寻找一种方法来将诸如 ng-repeat 之类的东西与静态内容集成在一起。也就是说，发送静态 div 并将它们绑定(bind)到 JS 数组(或者更确切地说，从内容构造一个数组，然后然后绑定(bind)到它)。

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

目标不仅是为了迎合搜索引擎和没有 js 的人，而是在静态网站和单页应用之间取得健康的平衡。

Answer 1

我不确定这是否正是您的意思，但它很有趣，值得一试。

基本上，该指令所做的是通过收集使用 ng-bind 绑定(bind)的属性为其每个子项创建一个项目。完成后，它只留下第一个 child 作为 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>

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

http://jsfiddle.net/LvjyZ/

(请注意 $() 有一些多余的使用，因为我没有以正确的顺序加载 jQuery 和 Angular，而且 Angular 的 jqLit​​e 上的 .find 缺少一些功能。)