0

ページには次のように動的に生成された多数のリンクがあります。

<a href="#" class="more-info-item" ng-click="showStats(item, $event)">
   More information
</a>

アイテムの名前を表示する単純なカスタム テンプレートもあります。

<script type="text/ng-template" id="iteminfo.html">
  <div class="item-name">
    {{item.name}}
  </div>
</script>

私がやりたいことは、リンクがクリックされたときに、テンプレートを動的にコンパイルし、リンクの直後に DOM に挿入することです。テンプレートをコンパイルするために showStats メソッド内で $compile を使用しようとしましたが、$compile が見つからないというエラーが発生しました。これを行うにはどうすればよいですか (また、新しく生成されたテンプレートのスコープの一部としてアイテムを提供します)?

4

2 に答える 2

2

以下は、ng-if を使用してアイテムを動的に注入するカスタム ディレクティブを使用したソリューションです。

プランカーでソリューションを見る

html:

<script type="text/ng-template" id="iteminfo.html">
    <div class="item-name" ng-if="item.visible">
            {{item.name}}
    </div>
</script>
<div ng-repeat="item in items" >
    <a href="#" class="more-info-item" more-info="item" ng-click="item.visible =!item.visible">
          More information
    </a>
</div>

脚本：

        angular.module('app', [])
        .controller('ctrl', function($scope)  {
                $scope.items = [{name:'apples', visible:false},{name:'pears', visible:false},{name:'oranges', visible:false}];
        })
        .directive('moreInfo', function($compile,$templateCache) {
                return {
                    restrict: 'A',
                    scope: '=',
                    link: function(scope, element, attr) {

                            var itemInfo = angular.element($templateCache.get('iteminfo.html'));
                            var lfn = $compile(itemInfo);
                            element.parent().append(itemInfo);
                            lfn(scope);
                    }
            };
  });
于 2014-05-22T06:59:03.453 に答える