如何用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替换元素

回答

相关问题