Как $ compile с помощью пользовательской директивы compile - PullRequest
Новая
       37

Как $ compile с помощью пользовательской директивы compile

0 голосов
/ 16 февраля 2019

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'

  }
}]);

ON директива dragMe Я пытаюсь использовать elem.data ('event ', {}) для сопоставления event.rate, event.title, event.inventory с book.contents.date, book.contents.name, значением 2/10

AS, который можно увидеть для трассировки отладкиздесь в 

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[0]$(elem).children[0].innerText

Отладка для $(elem).children[1].innerText означает для book.contents.name

$(elem).children[1] $(elem).children[1].innerText

Отладка для $(elem).children[2].innerText означает для значения 2/10

$(elem).children[2] $(elem).children[2].innerText

так, как убедиться, что следующий запрос 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);

когда я пытаюсь var compiled = $compile('<div class="left content" compile="book.contents.name" id="book_{{book.id}}"></div>')(scope); в функции ссылки директивы dragMe, она отправляется в директиву компиляцииНо я не могу заполнить скомпилированный div скомпилированным book.contents.name.

Как использовать $ 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);
            }
        );
    };
}]);

и 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>

Большое спасибо.

1 Ответ

0 голосов
/ 18 февраля 2019

Невозможно управлять вложенной компиляцией, первая компиляция предназначена для отображения окна внешних событий.Второй сервис $ 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

...