transclude簡單指令中的用法示例

在下面的簡單示例中，我通過控制器上的指令在視圖上打印名稱模型。該示例運行良好，但是使用transclude我無法理解。有人可以解釋它的用法嗎？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>

來源

2016-04-27 Deadpool

您的代碼並沒有真正表現出transclude做什麼：看這個普拉克和變化真/假值：

Plunk

現在你會希望看到的效果。來自plunkr的來源，進行了一些修改。

<!DOCTYPE html> 
<html> 

    <head> 
    <script data-require="[email protected]" 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>

所以當它是真的，你將看到的內容transcluded，

所以說您好：彼得

當假，它消除了您好，但保留名稱我冒號：

：彼得

來源

2016-04-27 08:42:32 PeterS

基本上，如果你有你的指令裏面的一些內容會自動被指令的內容替換

例如，如果你有<people>Test transclude</people>測試transclude字符串將是角度自動替換，當它處理指示。但是如果你想'測試transclude'也被顯示呢？這是跨部門採取行動的地方。

考慮以下

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

}）;

現在字符串「測試transclude」也將顯示標記內

這是plunker鏈接Plunk

來源

2016-04-27 08:42:05

從本質上講，這些都是圍繞任意內容包裝。 假設我有一個手風琴指令，顯示或隱藏任何與動畫一起使用的內容。

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指令包裝（transcludes）您使用它的內容。

另一個例子是模態窗口。你不想重複定義模式的代碼，每次你想使用它，所以你定義它一次，並使用transclusion將任何內容放入它。在Bootstrap UI中查看modal。

來源

2016-04-27 08:49:03 Ozrix

還值得注意的是，任何得到transcluded的「範圍」設置爲transcluding的指令。在上面的例子中，''的'scope'設置爲'akordion'指令 – Ozrix

transclude簡單指令中的用法示例

回答

相關問題