Question

在AngularJS模板html文件中，我有一个html元素，例如

<div>This is a complicated element that I don't want to type twice</div>

并且我需要该元素在我的网页中显示两次，但要连续不是（与{{ 1}}的行为）。

该元素足够小，以至于我认为没有必要为其制造整个组件（但也许我错了）。我希望对此有一个简单的模板功能。一条指令可能有效（但我不太了解它们）。

奖励：如果两个元素可以相互镜像，那就更好了。我的意思是该元素包含一个文本输入，并且如果用户将文本放入其中，则另一个应该相应地更新自身。这可能是另一个问题，因为它可能需要使用不同的技术。

Answer 1

考虑使用angularjs components 例如：https://codepen.io/fadihania/pen/bwpdPq

HTML：

<div ng-app="app">
  <my-component>
    <p>Test</p>
  </my-component>
</div>

JS：

angular
  .module('app', [])
  .component('myComponent', {
    template: '<div>' +
              '<h1>My Component</h1>' +
              '<ng-transclude></ng-transclude>' +
              '</div>',
    transclude: true
  });

然后根据需要和所需的位置放置component次。

在AngularJS中，如何重复两次但不连续重复一个元素？

1 个答案: