Jquery angularjs:-以有角度的方式将数据附加到HTML中

我是angular js的新手，我有js背景，并被困在一些东西中：-

我想在指令的帮助下将数据附加到HTML中

我将值（即HTML）存储在一个字符串中..但它给出了值..其中一个是转义字符串。 不知何故，我无法实施它

下面是我的代码

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

woi.directive（“addbuttons”、['$rootScope'，'userAPI'，function（$rootScope，userAPI，$compile）{
返回函数（范围、元素、属性）{
元素绑定（“单击”，函数（）{
scope.count++；
//var abc=额定载荷范围（页码）；
tograted（{userid:$rootScope.getUser（）.userid}，函数（r，$scope，div）{
if（！$rootScope.device.isMobile&！$rootScope.device.istable&&！$rootScope.device.isTouch）{
var topRatedList=r.gettopratedhomepage.topratedprogrammelist；
var-str=''；
对于（var i=0；i请阅读此：））有一个解释如何通过ng模板使用良好的模板工作：）
如何使用ng include以及如何在下一节中追加。
 <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>