Javascript 带ng转置的角度指令

我已经基于HTML

标记制作了一个非常简单的段落指令

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

问题是，当我更改输入时，第二个

会按预期更改，但第一个值不会更改

请查看它的运行情况。

再看一看，尤其是在这个特殊的位置

你看，当Angular在

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

这是一个非常简单的段落

它完全忘记了指令模板中的

{{ParagraphViewModel.text}

绑定，因为

的所有内容都将替换为

标记中的内容

---

第二种情况的效果与您预期的一样，原因很简单，因为不会发生内容替换，并且默认为模板中的内容。

我猜您在这里试图实现的是将默认文本传递给指令，然后使用绑定输入对其进行更改

您可以通过使用隔离作用域来实现这一点。以下是您应该如何做到这一点：

在您的视图中：

<div ng-app="myApp">

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

</div>

{{bar}}

在你的应用程序中：

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

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

angular.module（'myApp'，[]）；
angular.module（'myApp'）。指令（'段落'，函数（）{
返回{
限制：'E'，
是的，
范围：{
pgmodel:“=”，
pgtext:“@”
},
模板：“
{{pgmodel | | pgtext}
”
}
});

---

演示：

那么有什么解决方案吗？解决方案是什么它应该这样做。“你想要达到什么样的行为？”丹尼斯说得对。使用ng transclude时，Angular将替换您的标签。

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