清除angularjs指令中的DOM節點

我有以下指令。我通常不喜歡張貼太多的代碼，以便那些試圖回答問題的人可以關注重要的部分，但我不確定我在這裏做錯了什麼，所以我必須這樣做。清除angularjs指令中的DOM節點

這是一個指令，應該重複元素的所有孩子。最初的渲染工作，但當我修改列表，事情變得混亂。有關使用示例，請參見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 
})

來源

2013-07-15 bigblind

刪除它們有一個很奇怪在這裏，我不能換我的頭周圍...我要發佈一個答案，而不是評論，所以我可以更好地格式化我的代碼 – tnunamak

-1

我能得到孩子們，並採取angular.element($element[0]).children()^

來源

2013-07-20 12:17:15 bigblind

問題發生在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">…</dl> 
(c) [dl, ready: function, toString: function, eq: function, push: function, sort: function…]

此外，該API實際上是angular.element.children()而不是angular.element.children。但是$element是一個數組，它沒有DOM子元素。它的第一個元素是指我們正在尋找的<dl> DOM元素。

所以我期望$element[0]或angular.element($element[0])給我們作爲一個合適的JQuery element。但正如你從這些控制檯日誌中可以看到的，我們最終會圍成一圈。

我希望有人能夠對此有所瞭解。

來源

2013-07-16 15:46:49 tnunamak

清除angularjs指令中的DOM節點

回答

相關問題