Angular指令只能运行一次

Question

我有一个简单的Angular指令但它只渲染一次.

对模板的连续调用无法呈现.

HTML:

<div ng-app="myApp">
    A. <ui-foo value="1" />
       B. <ui-foo value="2" />
       C. <ui-foo value="'fubar'" />
</div>

JavaScript的:

angular.module('ui.directives', []);
angular.module('ui', [ 'ui.directives'
]).value('ui.config', {});

angular
    .module('ui.directives', [])
    .directive('uiFoo', 
        function() {
          return {
            restrict: 'E',
              scope:{
                  value:'='
              },
              template: '<h1>This is my directive #{{value}}</h1>'
          };
        }
  );
angular.module('myApp', ['ui.directives']);

我希望看到

A. This is my directive #1
B. This is my directive #2
C. This is my directive #fubar

但我只看到第一行.

看看我的JsFiddle快速回购

我究竟做错了什么？

Answer 1

你需要像这样关闭ui-foo的那些标签:

<div ng-app="myApp">
   A. <ui-foo value="1"></ui-foo>
   B. <ui-foo value="2"></ui-foo>
   C. <ui-foo value="'fubar'"></ui-foo>
</div>

否则,第一个指令取代了另外两个指令.