如何用ng-transclude替換元素

是否可以用ng-transclude而不是整個模板元素替換元素？如何用ng-transclude替換元素

HTML：

<div my-transcluded-directive> 
    <div>{{someData}}</div> 
</div>

指令：

return { 
    restrict:'A', 
    templateUrl:'templates/my-transcluded-directive.html', 
    transclude:true, 
    link:function(scope,element,attrs) 
    { 

    } 
};

我-transcluded-directive.html：

<div> 
    <div ng-transclude></div> 
    <div>I will not be touched.</div> 
</div>

我是什麼尋找的方法是讓<div>{{someData}}</div>代替<div ng-transclude></div>。目前發生的情況是，被攔截的HTML被放置在內,ng-transclude div元素中。

這可能嗎？

來源

2014-01-13 Francisc

我認爲最好的解決方案可能是創建你自己的transclude-replace指令來處理這個問題。但是，對於一個快速和骯髒的解決您的例子中，你基本上可以手動將transclusion的結果，你想：

我-transcluded-directive.html：

<div> 
    <span>I WILL BE REPLACED</span> 
    <div>I will not be touched.</div> 
</div>

指令：

return { 
    restrict:'A', 
    templateUrl:'templates/my-transcluded-directive.html', 
    transclude:true, 
    link:function(scope,element,attrs,ctrl, transclude) 
    { 
     element.find('span').replaceWith(transclude()); 
    } 
};

來源

2014-04-10 17:35:47 swehren

謝謝你，swehren。 – Francisc

對我來說，'element'找到'div [my-transcluded-directive]'，而不是模板。 –

@LittleBigBot如果你想發佈小提琴我會看看 – swehren

這很容易創建一個ng-transclude-replace指令，這裏是一個原始ng-transclude山寨。

directive('ngTranscludeReplace', ['$log', function ($log) { 
       return { 
        terminal: true, 
        restrict: 'EA', 

        link: function ($scope, $element, $attr, ctrl, transclude) { 
         if (!transclude) { 
          $log.error('orphan', 
            'Illegal use of ngTranscludeReplace directive in the template! ' + 
            'No parent directive that requires a transclusion found. '); 
          return; 
         } 
         transclude(function (clone) { 
          if (clone.length) { 
           $element.replaceWith(clone); 
          } 
          else { 
           $element.remove(); 
          } 
         }); 
        } 
       }; 
      }]);

PS：你也可以檢查this link看到ng-transclude

來源

2014-10-22 14:01:58 gogoout

謝謝！我一直在尋找一種可行的解決方案，該解決方案可以與使用transclusion的指令一起工作，但也是ng-repeat的一部分。接受的解決方案有效，但不適用於ng-repeat。我想它與'terminal：true'有關。最好的部分是這個代碼的用戶不必知道它的工作:) –

輝煌。正是我想要的非常感謝你。恕我直言，這應該是默認行爲transclude而不是留下空的，無用的額外嵌套Dom元素到處！ – Roaders

這部作品在角1.4.9之間的差異（和概率更早太）

return { 
     restrict: 'E', 
     replace: true, 
     template: '<span data-ng-transclude></span>', 
     transclude: true, 
     link: function (scope, el, attrs) ......... 
}

來源

2016-02-05 16:10:02 danday74

如何用ng-transclude替換元素

回答

相關問題