包括在AngularJS

Question

定製指令第一子html我有一個angularjs指令，其中我打開一個模板：

<div class="step" id="stepId" > 
</div> 

這裏的指令聲明：

angular.module('PortfolioApp') 
    .directive('slideStep', function() { 
return { 
    templateUrl: appUrl + '/templates/slideStep.html', 
    restrict: 'E', 
     link: function postLink(scope, element, attrs) { 
     //element.text('this is the slideStep directive'); 
      console.log("element text" +element.text()); 
     }, 
    replace:true 
}; 
}); 

我所試圖實現的，是我使用該指令時包含的html包含在替換的html中。因此例如：

<slide-step> 
    <img src="images/HAC0.jpg"/> 
</slide-step> 

成爲

<div class="step" id="stepId" > 
    <img src="images/HAC0.jpg"/> 
</div> 

有沒有執行此至極的方式允許元素的HTML的第一個孩子的簡單結合自定義元素？

Answer 1

您需要使用transclusion：

https://docs.angularjs.org/api/ng/directive/ngTransclude

angular.module('PortfolioApp') 
    .directive('slideStep', function() { 
return { 
    templateUrl: appUrl + '/templates/slideStep.html', 
    restrict: 'E', 
     link: function postLink(scope, element, attrs) { 
     //element.text('this is the slideStep directive'); 
      console.log("element text" +element.text()); 
     }, 
    transclude:true, 
}; 
}); 

，並在你的指令模板：

<div class="step" id="stepId" ng-transclude> 
</div>