単純なディレクティブで使用例を複写します。例

次の簡単な例では、ビューのディレクティブによってコントローラから名前モデルを出力しています。例は正常に動作していますが、使用するのはです。がわかりません。誰かがその使用法を説明できますか？あなたのディレクティブ内部の一部のコンテンツを持っている場合は、基本的にそれが自動的例については指示内容単純なディレクティブで使用例を複写します。例

によって置き換えられます

<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が何を示すものではありませんplunkerリンクです：このplunkを見て、変更を真/偽値：

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>

それが真であるときに、あなたは内容がトランスクルードされていることがわかります、

だから、そこHI言う：ピーター

するとFalseが、それはありHIを削除しますが、名前を保持しますそして私のコロン：

：基本的にはピーター

出典

2016-04-27 08:42:32 PeterS

それが処理するとき、あなたは<people>Test transclude</people>テストtransclude文字列を持っている場合は、自動的に角度によって置き換えされます指令。しかし、もしあなたが 'Test transclude'も表示させたいのであれば？ここでは、transcludeが動作する場所です。

は検討以下

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

}）。

今すぐ文字列「テストtranscludeは」も、タグ

内に表示され、これは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）します。

もう1つの例は、モーダルウィンドウです。あなたはそれを使用するたびにモーダルを定義するコードを繰り返すことは望ましくないので、一度定義し、transclusionを使用してそれにコンテンツを入れます。 modalをBootstrap UIにチェックしてください。

出典

2016-04-27 08:49:03 Ozrix

また、継承されるものは、その継承されるディレクティブに 'scope'が設定されていることにも注意してください。上記の例では、 ''の 'scope'は' akordion'ディレクティブに設定されています – Ozrix

単純なディレクティブで使用例を複写します。例

答えて

関連する問題