element.replaceWith trong liên kết chỉ thị tùy chỉnh chỉ hoạt động ở lần đầu tiên được gọi là

Question

Tôi mới sử dụng Angularjs và không hiểu quá nhiều về hậu trường. Về cơ bản, tôi muốn tạo chỉ thị kìm 'E', dựa trên dữ liệu trong bộ điều khiển tôi tạo động html, giống như toàn bộ bảng '' để thay thế chỉ thị.

Các directve trong file html của tôi là như thế này:

<matrixrows></matrixrows> 

đang chỉ thị của tôi là như thế này:

angular.module('matrix', [.....]) 
.directive('matrixrows', [..., function (...) { 
     return { 
      restrict: 'E', 
      replace: true, 
      require: '^matrix', 
      link: function (scope, element, attr, ctrl) { 
       ......... 
       scope.$watch('currentPage', function (newValue, oldValue) { 
        if (newValue && newValue != oldValue) { 

         var html = ""; 
         ....................... 
         here is the code to generate the html 
         ....................... 
         element.replaceWith(html); 
        } 
       }); 
      } 
    }]) 

Qua xem currentPage thay đổi 's tôi tái html và thay thế thẻ chỉ thị. Khi lần đầu tiên tôi thay đổi 'currentPage', thành phần .replaceWith (html) hoạt động tốt. Sau đó, tôi thay đổi 'currentPage angin, chức năng xem sẽ được kích hoạt, nhưng yếu tố .replaceWith (html) sẽ không hoạt động.

Sau đó, tôi bước vào Angularjs mã nguồn, tôi thấy, sau khi lần đầu tiên thực hiện element.replaceWith của, element [0] .parentNode trở thành rỗng, điều này gây ra replaceWith sụp đổ.

Bất kỳ ai biết cách hoạt động?

Answer 1

Dường như bạn đang cố gắng thay thế cùng một phần tử nhiều lần. Nhưng một khi nó đã được thay thế, nó đã biến mất. Để giải quyết cửa hàng này, currentHtml trong một biến. Một cái gì đó như thế này:

 link: function (scope, element, attr, ctrl) { 
      ......... 
      var currentElement = element; 
      scope.$watch('currentPage', function (newValue, oldValue) { 
       if (newValue && newValue != oldValue) { 
        ....................... 
        var html = ""; 
        here is the code to generate the html 
        ....................... 
        var replacementElement = angular.element(html); 
        currentElement.replaceWith(replacementElement); 
        currentElement = replacementElement; 
       } 
      }); 
     } 

Answer 2

Bạn nên sử dụng $ compile (...) trên chuỗi html được tạo.

ví dụ:

link: function (scope, element, attr, ctrl) { 
     ......... 
     var currentElement = element; 
     scope.$watch('currentPage', function (newValue, oldValue) { 
      if (newValue && newValue != oldValue) { 
       ....................... 
       var html = ""; 
       here is the code to generate the html 
       ....................... 
       var replacementElement = $compile(html)(scope); 
       currentElement.replaceWith(replacementElement); 
       currentElement = replacementElement; 
      } 
     }); 
    }