Question

HTML：

<!DOCTYPE html>
<html ng-app="myApp">
<head>
<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.3/angular.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div ng-controller="MyCtrl">

    <div my-directive>
        <button>some button</button>
        <a href="#">and a link</a>
    </div>
</div>
</body>
</html>

JS：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {
    //$scope.log=[];   
}

myApp.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something" ng-transclude> This is my directive content</div>'
    };
});

使用AngularJS的 1.1.3 版本，输出将来自my-directive（在HTML中）的按钮和锚点与模板内部文本“这是我的指令内容'。

如果我将版本更改为 1.2.1 ，则my-directive内容将替换模板内部文本。

有没有办法让角度1.2.1（及更高版本）做旧的行为？

Answer 1

没有。这是一个非常有意的改变。请参阅this commit。

Answer 2

Jeff Hubbard提供的链接（感谢杰夫）让我朝着正确的方向前进。根据该帖子的评论，某人（https://github.com/angular/angular.js/commit/eed299a31b5a6dd0363133c5f9271bf33d090c94#commitcomment-4685184）发布了一项工作：http://plnkr.co/edit/EjO8SpUT91PuXP0RMuJx?p=preview

基本上，您可以通过更改JavaScript以在单独的指令中使用transcludeFn函数来恢复旧行为。请参阅下面的更新代码：

var myApp = angular.module('myApp',[]);

function MyCtrl($scope) {

}

myApp.directive('myDirective', function(){
    return{
        transclude: true,
        template: '<div class="something" ng-transclude-append> This is my directive content</div>'      
    };
});

myApp.directive('ngTranscludeAppend', function() {
  return function(scope, element, attrs, ctrl, transcludeFn) {
      if (!transcludeFn) return;

      transcludeFn(function(clone) {
        element.append(clone);
      });
    };
});

链接到我更新的jsbin：http://jsbin.com/IfejIWES/3/

最后一点，我尝试将transcludeFn直接嵌入到我的链接函数中，如：

link: function(scope, element, attrs, ctrl, transcludeFn) {          
  transcludeFn(function(clone) {
    element.append(clone);
  });
}

但这有两次创建按钮和锚点的效果。把它移到自己的指令中解决了它。

Transclusion（true） - 组合值

2 个答案: