帶有ng-transclude的angular指令

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>會按預期更改，但第一個值不會更改。

請檢查此JSBin以查看它的實際運行情況。

Answer 1

再看看文檔 ，特別是在這個特定的例子中 。

你看，Angular在你的內容中轉換了你的內容

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

它完全忘記了指令模板中的{{ParagraphViewModel.text}}綁定，因為<p ng-transclude>所有內容都將被<paragraph>標簽中的內容替換。

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

Answer 2

我想你在這里想要實現的是將你的指令傳遞給默認文本然后用綁定輸入來改變它。

您可以使用隔離范圍實現此目的。 這是你應該怎么做的：

在您的視圖中 ：

<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>'
  }
});

演示： JSBin