AngularJS - Inserting dynamic HTML content

Question

I am generating dynamic HTML and prepending it this way:

$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 - I would like to know how can I do this using a directive.

2 - I know that I have to use $compile in order to use the link generated this way. How to do this?

Answer 1

Here's a simple example of how you can construct your directive.

app = angular.module('myApp', []);

app.directive("myDirective", function(){
        return {
          restrict: 'AE',
          replace: 'true',
          template: '<h3>Hello World!!</h3>', //put your html content here..
          scope: {
              param1: "=",            
              param2: "=",            
              param3: "="            
          },
          link: function(scope){
            //how to access passed params..
            console.log(scope.param1);
            console.log(scope.param2);
            console.log(scope.param3);
          }
      };
    })

On your html then you can call this directive as..

<my-directive param1="paramVal1" param2="paramVal2" param3="paramVal3"></my-directive>

Answer 2

Try something like this.

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

Usage

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

Answer 3

Consider using a native ng-repeat for your needs.

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>

Controller

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

Use one different tab per section you need.

Hope it meets your needs or at least gave you some clues.