angular 带有 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

再看看docs, especially at this particular example。

你看，当 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

angular 带有 ng-transclude 的指令

angular directive with ng-transclude

javascript

angularjs

angularjs-ng-transclude