angularjs - 在 AngularJS 中，如何从模板生成一段内容并在单击链接时将其插入 DOM

Question

我在页面上有许多链接，动态生成如下：

<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 没有找到。我将如何执行此操作（并且还提供项目作为新生成模板范围的一部分）？

Answer 1

这是一个使用自定义指令的解决方案，该指令使用 ng-if 动态注入项目：

使用 Plunker 查看解决方案

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);
                    }
            };
  });

Answer 2

您可以使用内置的ngInclude指令AngularJS

试试这个

工作演示

html

    <div ng-controller="Ctrl">
    <a href="#" class="more-info-item" ng-click="showStats(item, $event)">
        More information
   </a>
  <ng-include src="template"></ng-include>

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

脚本

function Ctrl($scope) {

    $scope.flag = false;
    $scope.item = {
        name: 'Manu'
    };
    $scope.showStats = function (item, event) {
        $scope.item = item;
        $scope.template = "iteminfo.html";
    }
}