帶ng-transclude的角度指令

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"> 

的問題是，當我更改輸入，預期第二<paragraph>變化，但第一批價值沒有。

請檢查this JSBin以查看它的行動。

Answer 1

我想你要在這裏實現的是傳遞你的指令一個默認的文本，然後用綁定的輸入來改變它。

您可以通過使用隔離範圍來實現。這裏是你應該怎麼做：

在你查看：

<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

再看看docs，特別是在這個特定的example。

你看，當在

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

它完全忘記了，因爲<p ng-transclude>所有內容將由<paragraph>標籤的內容替換該指令的模板約{{ParagraphViewModel.text}}結合角transcludes您的內容。

第二種情況正如您期望的那樣工作，僅僅是因爲內容替換不會發生，Angular默認爲模板中的內容。