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

Question

ON MYPENCODE具有以下两个指令dragMe和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'

  }
}]);

在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填充？ < / p>

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); 时 它已发送到compile指令，但我无法填充已编译的div 并带有book.contents.name。

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

这是编译指令。

编译

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

和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

无法操作嵌套编译，因此第一个编译用于外部事件框显示。第二个通过$ 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