ng-transcludeを使用したangleディレクティブ

Question

私はHTML <p>タグに基づいて非常に単純なパラグラフ指令を作成しました。

angular.module('myApp').directive('paragraph', function() { 
    return { 
    restrict: 'E', 
    transclude: true, 
    controller: function() { 
     var vm = this; 
     vm.text = "Paragraph text from controller" 
    }, 
    controllerAs: 'ParagraphViewModel', 
    template: '<p ng-transclude>{{ParagraphViewModel.text}}</p>' 
    } 
}); 

私は次のように私のhtmlでそのディレクティブを使用しています：

<paragraph>This is a very simple paragraph</paragraph> 
<paragraph></paragraph> 

そして私は、私はParagraphViewModel.textにそれをバインドされてきた入力を持っています。

<input type="text" ng-model="ParagraphViewModel.text"> 

私は入力を変更すると、問題は、予想されるように、第2 <paragraph>変化である、しかし、最初のものの値にはありません。

this JSBinにご確認ください。

Answer 1

ここで達成しようとしていることは、ディレクティブにデフォルトのテキストを渡し、バインドされた入力でそれを変更することです。

これは、分離スコープを使用することで実現できます。ここではあなたがそれを行う必要があります方法は次のとおりです。あなたののAppで

<div ng-app="myApp"> 

    <paragraph pgtext="Foo" pgmodel="bar"></paragraph> 
    <paragraph>{{bar}}</paragraph> 
    <input type="text" ng-model="bar"> 

</div> 

：あなたのビューで

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

angular.module('myApp').directive('paragraph', function() { 
return { 
    restrict: 'E', 
    transclude: true, 
    scope: { 
     pgmodel: '=', 
     pgtext: '@' 
    }, 
    template: '<p ng-transclude>{{pgmodel || pgtext}}</p>' 
    } 
}); 

DEMO：JSBin

Answer 2

特にexampleでdocsをもう一度見てください。

あなたは角度が

<paragraph>This is a very simple paragraph</paragraph> 

でコンテンツをtranscludes <p ng-transclude>のすべてのコンテンツが<paragraph>タグからコンテンツに置き換えられますので、それは完全におよそ{{ParagraphViewModel.text}}ディレクティブのテンプレートに結合するのを忘れたときに、参照してください。

2番目のケースは、単にコンテンツの置換が行われず、Angularのデフォルトがテンプレートのコンテンツのデフォルトになるためです。