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>

否则，第一个指令取代了另外两个。

Answer 2

解决这个问题的方法是你应该将每个ui-foo标签嵌入到每个相应的控制器中，如下所示：

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

希望这会对你有所帮助!!

Angular指令只能运行一次

2 个答案: