在简单的指令示例中嵌入用法

Question

在下面的简单示例中，我通过视图上的指令从控制器打印名称模型。这个例子运行很好，但是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

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

例如，如果您有<people>Test transclude</people> 测试嵌入字符串将在处理指令时自动替换为angular。但是，如果您还想显示 'Test transclude ' 怎么办？这是 transclude 发挥作用的地方。

考虑以下因素

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

});

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

这就是傻逼linkPlunk

Answer 2

您的代码并没有真正展示 transclude 的作用：看看这个 plunk 并更改 true/false 值：

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>

所以当它为真时，你会看到内容被嵌入了，

所以它说你好：彼得

为 False 时，它会删除那里的 HI，但保留名称和我的冒号：

：彼得

Answer 3

本质上，这些是对任意内容的包装。 假设我有一个手风琴指令，可以显示或隐藏您将它与动画一起使用的任何内容。

    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 指令覆盖（嵌入）您使用它的内容。

另一个例子是模态 windows。您不想每次要使用它时都重复定义模态的代码，所以您定义一次，然后使用 transclusion 将任何内容放入其中。查看 Bootstrap UI 中的 modal。

在简单的指令示例中嵌入用法

transclude usage in simple Directive Example

javascript

directive

angularjs