如何使用自定义编译指令进行$编译

Question

ON MYPENCODE有以下两个指令dragMe和编译：

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'

  }
}]);

关于dragMe指令我尝试能够在elem.data（'event'，{}）上将event.rate，event.title，event.inventory映射到book.contents.date，book.contents.name，2/10值

您可以在此处查看调试跟踪

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

通过后的意思

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

调试$(elem).children[0].innerText意味着book.contents.date

$(elem).children[1].innerText的调试意味着book.contents.name

调试$(elem).children[2].innerText意味着2/10值

那么如何确保下一个请求var编译....以正确的方式运行，以便我可以在$(elem).children[1].innerText中填充book.contents.name？

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

当我在dragMe指令的链接函数上尝试var compiled = $compile('<div class="left content" compile="book.contents.name" id="book_{{book.id}}"></div>')(scope);时它被发送到编译指令但是我无法得到编译好的book.contents.name编译的div。

如何在我的情况下使用$ compile与compile指令。或任何解决方法为了能够在elem.data（'event'，{}）上将event.rate，event.title，event.inventory映射到book.contents.date，book.contents.name，2/10值。

这是编译指令。

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>

非常感谢。

Answer 1

无法操作嵌套编译，第一次编译是针对外部事件框显示的。第二个via $ compile服务无法使用附加到event.title的已编译标题。所以我通过访问book.contents.name并手动解析html字符串以获得标题部分来制定解决方法。

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