Question

在下面的简单示例中，我将从视图中的controller by directive打印名称模型。这个例子运行正常，但是 transclude 的用法是什么我无法理解。有人可以解释它的用法吗？

<html>
<head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js" ></script> 
</head>
<body ng-app="myApp" ng-controller="myCtrl"> 
<people></people>

<script>
//module declaration
var app = angular.module("myApp",[]);
//controller declaration
app.controller('myCtrl',function($scope){
    $scope.name = "Peter";
});
//directives declaration
app.directive('people',function(){
    return{
        restric: 'E',
        template: '<div>{{name}}</div>',
        transclude: true
    }
});

</script> 
</body> 
</html>

Answer 1

您的代码并未真正展示transclude的作用：看看这个插件并改变真/假值：

Plunk

你现在会注意到效果。来自plunkr的来源，有一些修改。

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.5.3" data-semver="1.5.3" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

<body ng-app="myApp" ng-controller="myCtrl"> 
<people>HI there</people>

<script>
//module declaration
var app = angular.module("myApp",[]);
//controller declaration
app.controller('myCtrl',function($scope){
    $scope.name = "Peter";
});
//directives declaration
app.directive('people',function(){
    return{
        restric: 'E',
        template: '<div><ng-transclude></ng-transclude>: {{name}}</div>',
        transclude: false
    }
});

</script> 
</body> 

</html>

所以当它成立时，你会看到内容被转换，

所以它说HI：彼得

当为False时，它会移除HI There，但保留名称和冒号：

：彼得

Answer 2

基本上，这些是任意内容的包装。 假设我有一个手风琴指令，用于显示或隐藏您使用动画制作的任何内容。

    app.directive('akordion', [function() {
        return {
            restrict:   'A',
            replace:    true,
            transclude: true,
            template:   '<div class="accordion-wrapper">'
                          +'<div class="transcluded" ng-transclude></div>'
                        +'</div>',
            link: function(scope, elem, attrs) {
                scope.$watch(attrs.show, function(newVal){
                    toggle(newVal);
                });

                function toggle(show) {
                    var h = (show) ? 0 : '600px';
                    $(elem).css({ maxHeight: h });
                }
            }
        }
    }]);

您可以这样使用它：

<div akordion="" id="league-admin">
      <div>
           foo
      </div>
      <my-directive></my-directive>
</div>

结果（生成的HTML）是：

<div class="accordion-wrapper" id="league-admin">
    <div class="transcluded">
        <div>
            foo
        </div>
        <div id="my-directive">...</div>
    </div>
</div>

关键是，通过调用akordion=""，您可以获取其中的任何内容并将其放入模板（<div class="transcluded" ng-transclude>）中。换句话说，akordion指令包装（转换）您使用它的内容。

另一个例子是模态窗口。您不想在每次要使用时重复定义模态的代码，因此您只需定义一次，并使用transclusion将任何内容放入其中。查看Bootstrap UI中的modal。

Answer 3

基本上如果您的指令中有一些内容，它将自动替换为指令内容

例如，如果您有<people>Test transclude</people> Test transclude字符串在处理指令时将自动替换为angular。但是如果你想要“测试转换”也会被显示呢？这是转录行动的地方。

考虑以下

app.directive('people',function(){
return{
    restric: 'E',
    template: '<div><div ng-transclude></div>{{name}}</div>',
    transclude: true
}

}）;

现在字符串'Test transclude'也将显示在标签

中

这是plunker链接Plunk

在简单的指令示例中转换用法

3 个答案: