javascript - 带有 ng-transclude 的 Angular Directive(指令)

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>

我有一个输入，我已将其绑定(bind)到 ParagraphViewModel.text .

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

问题是，当我更改输入时，第二个 <paragraph>按预期更改，但第一个值没有。

请查看this JSBin看看它的实际效果。

Answer 1

再看看 docs ，尤其是在这个特殊的example .

你看，当 Angular 将你的内容嵌入

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

它完全忘记了 {{ParagraphViewModel.text}}绑定(bind)在指令的模板中，因为 <p ng-transclude> 的所有内容将被来自 <paragraph> 的内容替换标签。

第二种情况如您所愿，只是因为没有发生内容替换，并且 Angular 默认使用您模板中的内容。