Compilation of the template



  • There's a pattern.

    <div class="row">
        <div class="col-xs-12 page-feed">
            <div class="box {{_id}}">
                <div class="avatar">
                    <img src="{{user.photo}}" alt="Jane" />
                </div>
                <div class="page-feed-content">
                    <small class="time">{{user.name}}, {{rebuildDate(date)}}</small>
                    <p>{{comment}}</p>
                    <div class="likebox">
                        <ul class="nav navbar-nav">
                                <li ng-click="like(_id,$event)"><i class="fa fa-thumbs-up"></i> <span class="likes">{{likes}}</span></li>
                                <li ng-click="dislike(_id,$event)"><i class="fa fa-thumbs-down"></i> <span class="dislikes">{{dislikes}}</span></li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>
    

    And code AngulaJS:

           $scope.$on('commentsAfterAdd',function(event, data){
                $http.get('views/post.html').then(function(html){
                    for(var item in data.collection)
                        $scope[item] = data.collection[item];
    
                var template = angular.element(html.data);
                var element = $compile(template)($scope);
              document.body.querySelector('[class="commentsList"]').innerHTML += element.html();
            });
        });
    

    If after $compile I do.

    console.info(element)

    I see the following:

    введите сюда описание изображения

    I mean, the compilation's going well, but there's a problem.
    Stroke:

    document.body.querySelector('[class="commentsList"]').innerHTML += element.html();

    inserts a reference template on the page.

    Already. InnerHTML I tried, and element[0], not helping.
    All right, all right. HTML I can't get it.

    Can you tell me how to be?



  • innerHTML - is the characteristic of the element that returns or sets the line string

    Let's get a code like this:

    element.innerHTML += "<div>test</div>";
    

    It's the same thing as it is.

    var html = element.innerHTML;
    html += "<div>test</div>";
    element.innerHTML = html;
    

    I'm drawing attention to the variable. html There are no elements. line♪ Next. line We add another line, and we attribute innerHTML. As a result, the element has already built different elements, with other events and properties.

    In your case, you compromised the template by service. $compileand the next line of the compiled template turns into a line, you build a line. new Elements and building them [class="commentsList"]

    Moreover, innerHTML is perhaps the most resource-intensive operation with DOM, if possible, should be avoided at all times.

    In your case, you need to use the functions to build elements in DOM-derivatives, such as appendChild Native JS or append in jQuery.




Suggested Topics

  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2
  • 2