Question

我正在生成动态HTML并以这种方式预先添加：

$scope.prepareContent = function(content, id) {
    $scope.myContent = 
        '<div class="foo" id="' + id + '">' +
            '<a href="#" ng-click="delete(' + id + ')">Delete this content</a>' +
            content +
        '</div>';
}

divOne = angular.element( document.querySelector('.one') );
divOne.prepend($scope.myContent);

1 - 我想知道如何使用指令来做到这一点。

2 - 我知道我必须使用$ compile才能使用这种方式生成的链接。怎么做？

Answer 1

这是一个如何构建指令的简单示例。

<button>Again</button><br>
<canvas width=640 height=165></canvas>

在您的html上，您可以将此指令称为..

Serial.println(nrOfButtonPressed);

Answer 2

尝试这样的事情。

angular.module('myApp')
  .directive('deleteLink', [function ($timeout, $sce) {
      return {
        restrict: 'E',
        scope: {
          id: '='
        }
        replace: true, // Replace with the template below
        link: function (scope, element, attrs) {
          scope.delete = function () {
            //Write delete logic here using scope.id
          };
        },
        template: '<div class="foo"><a href="#" ng-click="delete()">Delete this content</a></div>'
      };
    }
  ]);

用法

<delete-link id="pass the id here"></delete-link>

Answer 3

考虑根据您的需要使用原生ng-repeat。

<强> HTML

<div>
  Regular time
  <div ng-repeat="content in regularTime.contents">
     {{content}}
     <a href="#" ng-click="regularTime.splice($index,1)">Delete this content</a>
  </div>
</div>

<强>控制器

$scope.regularTime = [];
$scope.regularTime.push("Fantastic !");

每个部分使用一个不同的标签。

希望它符合您的需求，或者至少为您提供一些线索。

AngularJS - 插入动态HTML内容

3 个答案: