Góc ng-lặp lại thực hiện

Question

Tôi thử thực hiện lệnh ng lặp lại góc và tôi không hiểu tại sao mã này không hoạt động đúng.

.directive("myRepeat", function() { 
    return { 
     transclude: "element", 
     priority: 1000, 
     compile: function(tElem, tAttrs) { 
      var myLoop = tAttrs.myRepeat, 
        match = myLoop.match(/^\s*(.+)+in\s+(.*?)\s*(\s+track\s+by\s+(.+)\s*)?$/), 
        indexString = match[1], 
        collectionString = match[2], 
        parent = tElem.parent(); 

      return function($scope, iElem, iAttrs, controller, $transclude) { 


        $scope.$watchCollection(collectionString, function(newCollection) { 
        var i, block, elements = []; 

        // check if elements have already been rendered 
        if (elements.length) { 
         // if so remove them from DOM, and destroy their scope 
         for (i = 0; i < elements.length; i++) { 
          elements[i].el.remove(); 
          elements[i].scope.$destroy(); 
         } 
         elements = []; 
        } 

        for (i = 0; i < newCollection.length; i++) { 
         $transclude(function(clone, scope) { 
          scope[indexString] = newCollection[i]; 
          parent.append(clone); 
          block = {}; 
          block.el = clone; 
          block.scope = scope; 
          elements.push(block); 
         }); 
        } 
       }); 
      } 
     } 
    } 
}) 

và đoạn HTML

<ul ng-controller="MyCtrl"> 
    <li my-repeat="city in cities">{{city.name}}</li> 
</ul> 

Vấn đề của tôi là yếu tố LI trả lại bình thường, nhưng họ không được chứa tên thành phố. Xin giải thích cho tôi tại sao lại xảy ra như vậy. Tôi hiểu làm thế nào công việc ng-transclude trong trường hợp nguyên thủy, khi chúng ta có khuôn mẫu với phần tử với ng-transclude và trong định nghĩa chỉ thị của chúng tôi xác định transclude: true, nhưng tôi không hiểu cách làm việc với transclude: "element". P.S. Xin lỗi vì tiếng Anh của tôi. Tôi mới bắt đầu :)

Answer 1

Tôi nhận thấy rằng indexString của bạn không đúng khi tôi viết nó vào bảng điều khiển. thay đổi: match = myLoop.match(/^\s*(.+)+in\s+(.*?)\s*(\s+track\s+by\s+(.+)\s*)?$/)-match = myLoop.split(' ')

Full mã mà làm việc cho tôi:

var app = angular.module('app', []); 
app.controller("MyCtrl", function($scope){ 
    $scope.cities = [{ 
    name:'a' 
    }, {name: 'b'}, 
    {name: 'c'}] 
}) 

app.directive("myRepeat", function() { 
    return { 
     transclude: "element", 
     priority: 1000, 
     compile: function(tElem, tAttrs) { 
      var myLoop = tAttrs.myRepeat, 
        match = myLoop.split(' '), 
        indexString = match[0], 
        collectionString = match[2], 
        parent = tElem.parent(); 
      console.log("match: " + match); 
      console.log("index string: " + indexString); 
      console.log("coll: " + collectionString); 
      var elements = []; 
      return function($scope, iElem, iAttrs, controller, $transclude) { 


        $scope.$watchCollection(collectionString, function(newCollection) { 
        var i; 

        // check if elements have already been rendered 
        if (elements.length) { 
         // if so remove them from DOM, and destroy their scope 
         for (i = 0; i < elements.length; i++) { 
          elements[i].el.remove(); 
          elements[i].scope.$destroy(); 
         } 
         elements = []; 
        } 

        for (i = 0; i < newCollection.length; i++) { 
         $transclude(function(clone, scope) { 
          scope[indexString] = newCollection[i]; 
          parent.append(clone); 
          block = {}; 
          block.el = clone; 
          block.scope = scope; 
          elements.push(block); 
         }); 
        } 
       }); 
      } 
     } 
    } 
})