How to $compile with a custom compile directive

Question

ON MYPENCODE Having the following two directives dragMe and compile :

dragMe

app.directive('dragMe',['$compile', function ($compile) {

  return {

    restrict: 'A',
    scope:{
            book:'='
    },
    link: function(scope, elem, attr, ctrl) {
    //Here I try to compile book.contents.name in the element div.left.content but :( it's not working !
    var compiled = $compile('<div class="left content" compile="book.contents.name" id="book_{{book.id}}"></div>')(scope);
  //I try to replace div.left.content of dragme.html template
  //with the assumed well working var compiled but yet until now var compiled as I told before it's not working     
  elem.find("div.left.content").replaceWith(compiled);

      elem.data('event', {
          //rate: $.trim($(elem).children[0].text()),// use book.contents.date as the event rate
          title: $.trim($(elem).children[1].text()), // use book.contents.name as the event title
          //inventory:$.trim($(elem).children[2].text()),// use 2/10 as the event inventory
          stick: true // maintain when user navigates (see docs on the renderEvent method)
        });

      elem.draggable({
          zIndex: 999,
          revert: true,      // will cause the event to go back to its
          revertDuration: 0  //  original position after the drag
        });
    },
    templateUrl: 'dragme.html'

  }
}]);

ON dragMe directive I try To be able on elem.data('event',{}) to map the event.rate, event.title, event.inventory to book.contents.date, book.contents.name, 2/10 value

AS you can see for debug trace here in

elem.find("div.left.content").replaceWith(compiled);

means after passing

var compiled = $compile('<div class="left content" compile="book.contents.name" id="book_{{book.id}}"></div>')(scope);

Debug for $(elem).children[0].innerText means for book.contents.date

Debug for $(elem).children[1].innerText means for book.contents.name

Debug for $(elem).children[2].innerText means for 2/10 value

so how to make sure that the next request var compiled .... operates in a correct way so that I can have in $(elem).children[1].innerText filled with book.contents.name ?

var compiled = $compile('<div class="left content" compile="book.contents.name" id="book_{{book.id}}"></div>')(scope);

when I try var compiled = $compile('<div class="left content" compile="book.contents.name" id="book_{{book.id}}"></div>')(scope); on the link function of dragMe directive It's sent to compile directive but I'm not able to get the compiled div filled with the book.contents.name compiled.

How to use $compile in my case with compile directive. or any workaround To be able on elem.data('event',{}) to map the event.rate, event.title, event.inventory to book.contents.date, book.contents.name, 2/10 value.

Here is the compile directive.

compile

app.directive('compile', ['$compile', function ($compile) {

  return function (scope, element, attrs) {

        scope.$watch(
            function(scope) {
                // watch the 'compile' expression for changes
                return scope.$eval(attrs.compile);
            },
            function(value) {
                // when the 'compile' expression changes
                // assign it into the current DOM
                element.html(value);

                // compile the new DOM and link it to the current
                // scope.
                // NOTE: we only compile .childNodes so that
                // we don't get into infinite loop compiling ourselves
                $compile(element.contents())(scope);
            }
        );
    };
}]);

and dragme.html

<script type="text/ng-template" id="dragme.html">
                       <div class="circle">
                                  {{book.contents['date']}}
                       </div>
                       <!-- THIS IS THE DIV THAT SHOULD BE REPLACED -->
                       <div class="left content"  id="book_{{book.id}}">

                       </div>

                       <div class="left rating">
                            2/10
                       </div>

                       <div class="clear">
                       </div>
                   </script>

Many thanks.

Answer 1

Unable to operate a nested compile the first compile is for external events box displaying. The second via $compile service doesn't work to have a compiled title that would be attached to event.title. so I made a workaround by accessing book.contents.name and parsed the html string manually to get only the title part.

link: function(scope, elem, attr, ctrl) {

      var bookName = scope.book.contents.name.trim();
      var n = scope.book.contents.name.indexOf("</span><br><span>");
      var titleShrink = bookName.substring(10, n).trim();

      elem.data('event', {
        rate:  scope.book.contents.date,// as the event rate
        title: titleShrink,// as the event title
        stick: true // maintain when user navigates (see docs on the renderEvent method)

      });

WorkingPen