1

我有以下指令。我通常不喜欢发布太多代码，以便那些试图回答问题的人可以专注于重要部分，但我不确定我在这里做错了什么，所以我必须这样做。

这是一个应该重复元素的所有子元素的指令。初始渲染有效，但是当我修改列表时，事情变得一团糟。有关用法示例，请参阅此jsFiddle。尝试删除一个项目，看看出了什么问题。

bigblind = window.bigblind || angular.module("bigblind",[]);

bigblind.directive("repeatInside", function(){
    var makeChildScope = function(scope, index, key, val, keyIdentifier, valIdentifier){
        childScope = scope.$new();
        childScope.index = index
        if (keyIdentifier) childScope[keyIdentifier] = index;
        childScope[valIdentifier] = val;
        childScope.first = (index == 0);
        return childScope
    };
    var ddo = {
        transclude:true,
        compile: function(element, attrs, transclude){
            return function($scope, $element, $attr){
                var expression = $attr.repeatInside;
                var match = expression.match(/^\s*(.+)\s+in\s+(.*?)$/)
                var lhs, rhs
                var keyIdentifier, valIdentifier, hashFnLocals = {};


                if(!match){
                    throw "Expected expression in form of '_item_ in _collection_[ track by _id_]' but got " + expression;
                }

                lhs = match[1];
                rhs = match[2];

                match = lhs.match(/^(?:([\$\w]+)|\(([\$\w]+)\s*,\s*([\$\w]+)\))$/);
                if (!match) {
                    throw "bad left hand side in loop";
                }
                valIdentifier = match[3] || match[1];
                keyIdentifier = match[2];

                $scope.$watch(rhs, function(newval, oldval) {
                    var childScope, index = 0

                    for (var child in $element.children){
                        child.remove();
                    }

                    if (angular.isArray(newval)){
                        for (index=0; index<newval.length; index++) {
                            childScope = makeChildScope($scope, index, index, newval[index], keyIdentifier, valIdentifier);
                            transclude(childScope, function(clone){
                                clone.scope = childScope;
                                $element.append(clone);
                            });
                        }
                    }else{
                        for (key in newval){
                            if (newval.hasOwnProperty(key) && !key[0] == "$") {
                                childScope = makeChildScope($scope, index, key, newval[key], keyIdentifier, valIdentifier);
                                index += 1;
                                transclude(childScope, function(clone){
                                    clone.scope = childScope;
                                    $element.append(clone);
                                });
                            }
                        }
                    }
                }, true);
            }   
        }
    };
    return ddo
})
4

2 回答 2

1

问题发生在child.remove();. 你会注意到你的循环实际上并没有遍历任何孩子：for (var child in $element.children)

当我记录以下表达式时，我得到了一些奇怪的结果

(a) console.log($element);
(b) console.log($element[0]);
(c) console.log(angular.element($element[0]));

给

(a) [dl, ready: function, toString: function, eq: function, push: function, sort: function…]
(b) <dl repeat-inside=​"word in dict">​…​&lt;/dl>​
(c) [dl, ready: function, toString: function, eq: function, push: function, sort: function…]

此外，API 实际上是angular.element.children()而不是angular.element.children. But$element是一个数组，它没有 DOM 子节点。它的第一个元素是指<dl>我们正在寻找的 DOM 元素。

因此，我希望$element[0]或将其作为适当的JQuery 元素angular.element($element[0])提供给我们。但正如您从这些控制台日志中看到的那样，我们最终只能绕圈子。

我希望有人可以对此有所了解。

于 2013-07-16T15:46:49.043 回答
-1

我能够得到孩子并将他们带走angular.element($element[0]).children()^

于 2013-07-20T12:17:15.900 回答