带ng- translude的Angular指令

angular directive with ng-transclude

本文关键字：Angular 指令 translude ng-      更新时间：2023-09-26

我已经做了一个非常简单的段落指令基于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>按预期变化，但第一个的值没有。

再看一下文档，特别是这个特定的示例。

你看，当Angular在 中跨接你的内容时，
<paragraph>This is a very simple paragraph</paragraph>

它完全忘记了指令模板中的{{ParagraphViewModel.text}}绑定，因为<p ng-transclude>的所有内容将被<paragraph>标签的内容所取代。

第二种情况会像你期望的那样工作，仅仅是因为内容替换没有发生，Angular默认使用你模板中的内容。

我猜你在这里想要实现的是传递你的指令一个默认文本，然后用绑定输入改变它。

您可以通过使用隔离作用域实现这一点。你应该这样做:

在你的视图:

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

在你的App:

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

相关文章：