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

Question

ON MYPENCODE 有以下两个指令 dragMe 和 compile :

拖我

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 指令我尝试能够在 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 compiled ....以正确的方式运行，以便我可以在 $(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 指令的 link 函数上尝试 var compiled = $compile('<div class="left content" compile="book.contents.name" id="book_{{book.id}}"></div>')(scope); 时 它被发送到编译指令，但我无法获得已编译的 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