angularjs: -Append данные в HTML угловой путь

Question

Я новичок в угловых JS, у меня есть Js фон и застрял в чем-то: -

Я хочу добавить данные в HTML с помощью директивы ,

Я сохраняю значение (т. Е. HTML) в строке. Но это значение value..one из строки escaping. Как-то я не смог его реализовать.

Ниже приведен мой код.

woi.directive("addbuttons",['$rootScope','userAPI', function($rootScope,userAPI,$compile){ 
    return function(scope, element, attrs){ 
     element.bind("click", function(){ 
      scope.count++; 
      //var abc= scope.loadRated(pageno); 
      userAPI.topRated({userid: $rootScope.getUser().userid}, function (r, $scope, div){ 
       if(!$rootScope.device.isMobile && !$rootScope.device.isTablet && !$rootScope.device.isTouch) { 
        var topRatedList = r.gettopratedhomepage.topratedprogrammelist; 
        var str=''; 
        for(var i=0;i<topRatedList.length;i++) 
        { 
         str+=topRatedList[i].actualname; 

         var str=" 
         <div class='thumb'> 
         <div ng-show='topRatedList[i].isrecommended==1' class='favorite-ribbon'></div> 
         <div class='player'></div> 
         <div class='image' style='background-image:url({{topRatedList[i].imagefilepath}});'> 
          <a ng-click='playVideo(topRatedList[i].programmename,$event)' ng-show='hasVideo()' class='play' style='cursor:pointer'></a> 

          <a ng-href='#!/program/{{topRatedList[i].programmename | encodeUrl}}' ng-show='!hasVideo()' class='noPlay' ng-click='EncodeUrlWithDash(topRatedList[i].programmename,$event,'programme',topRatedList[i].channelid,topRatedList[i].programmeid,topRatedList[i].starttime)'></a> 
         </div> 

         <span class='time' ng-show='topRatedList[i].duration'>{{topRatedList[i].duration | videoLength}}</span> 

         <div class='user-actions' ng-controller='UserController'> 

          <a live-tooltip='Add to Favorite' ng-click='toggleFavorite(p, $event)' class='btn btn-small btn-purple-blue' ng-class='{active:topRatedList[i].isfavorite == \'1'}"> 
           <i class="icon-favorite"></i> 
          </a> 

          <a live-tooltip="Reminder Alerts" ng-click='toggleReminder(p, $event)' class='btn btn-small btn-purple-blue' ng-class="{active:topRatedList[i].isreminder == '1'}" > 
           <i class="icon-reminder"></i> 
          </a> 

          <a live-tooltip='Add to Watchlist' ng-click='addToWatchlist(p, $event)' class='btn btn-small btn-purple-blue' ng-class="{active:topRatedList[i].iswatchlist == '1'}"> 
           <i class="icon-watchlist"></i> 
          </a> 
         </div> 

        </div> 
         <div class="text-wrapper"> 
         <h2 multiline-overflow><a title="{{topRatedList[i].programmename}}" href="#!/program/{{topRatedList[i].programmename | encodeUrl}}" ng-click="EncodeUrlWithDash(topRatedList[i].programmename,$event,'programme',topRatedList[i].channelid,topRatedList[i].programmeid,topRatedList[i].starttime)" >{{topRatedList[i].programmename}} 
         </a></h2> 

         <p class='infoChannel' live-tooltip-single-line= "{{topRatedList[i].channeldisplayname}}"><a href="#!/channel/{{topRatedList[i].channeldisplayname | encodeUrl}}" ng-click="EncodeUrlWithDash(topRatedList[i].channeldisplayname,$event,'channel',topRatedList[i].channelid,topRatedList[i].programmeid)">{{topRatedList[i].channeldisplayname}} 
        </a></p> 
         <p class='info'>{{topRatedList[i].starttime|featuredVideoTime}}</p> 

         </div>"; 
        } 

        angular.element(document.getElementById('space-for-buttons')).append($compile("<div><button class='btn btn-default' data-alert="+scope.count+">Show alert #"+scope.count+"</button></div>")(scope)); 
       } 
      }); 
     }); 
    }; 
}]); 

Я получаю данные от пользователяApi и хочу поместить его в Html.

Ниже является HTML-код, с помощью которого я пытаюсь реализовать событие щелчка: -

<div class='tab clearfix' ng-show="userLogged=='off' && currentActiveTab == 'rated'" > 

      <div > 
      <input type="hidden" id="hdnTopRatedPage" value="0" ng-update-hidden> 
      <div class='item' ng-repeat='p in programs.rated' home-tab-item watchable="p" ></div> 
      </div> 
      <div id="space-for-buttons"> 


      <div class = 'rated-spin' ng-show = 'programs.rated == 0 && ratedLoaded == false'> </div> 
      <div ng-show="programs.rated == 0 && ratedLoaded == true" class="noResultsBlock">No Results for Rated.</div> 
      <div class='clearfix'></div> 
      </div> 

      <div ng-controller="MainCtrl" ng-app="woi"> 
      <yes style='background-color: brown;padding-right: 61px;'></yes> 

      </div> 

     </div> 

Также приведенный выше код не работает и дает вопросы, как DIV, который я получаю не правильно Я тоже не знаю, где я ошибаюсь.

Я просто хочу знать «угловой» способ сделать это.

Спасибо.

Answer 1

пожалуйста, прочитайте это http://lostechies.com/gabrielschenker/2013/12/28/angularjspart-6-templates/ :)) есть объяснить, как использовать хорошую работу с шаблонами :) Нг-шаблона