Добавить HTML в угловые js, дающие ошибки

Question

Я новичок в angularjs и пытался добавить данные в виде события click.

Ниже приведен код, который я написал:

Html

<div id="space-for-buttons"> 
      <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 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 ng-controller="MainCtrl" ng-app="woi"> 
      <yes style='background-color: brown;padding-right: 61px;'></yes> 

      </div> 

Директива:

var pageno=1; 

function MainCtrl($scope) { 
    $scope.count = 0; 
} 

//Directive that returns an element which adds buttons on click which show an alert on click.Here we can put 
woi.directive("yes",['userAPI','$rootScope', function(userAPI,$rootScope){ 
    return { 
     restrict: "E", 
     template: "<a ng-click='str()' addbuttons>please click on me</a>" 
    } 
}]); 

//Directive for adding buttons on click that show an alert on click 
woi.directive("addbuttons",['$rootScope','userAPI','$compile', function($rootScope,userAPI,$compile){ 
    return function(scope, element, attrs){ 
     element.bind("click", function(){ 
      scope.count++; 
      alert("hII") 
      //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; 
        console.log(r) 

        var str=''; 
        for(var i=0;i<topRatedList.length;i++) 
        { 
         // str+="topRatedList[i].actualname"; 

         var programNameEncode= topRatedList[i].programmename // | encodeUrl; 
         var program=topRatedList[i].programmename; 
         var channelId=topRatedList[i].channelid; 
         var programId=topRatedList[i].programmeid; 
         var channel=topRatedList[i].channeldisplayname; 
         var channelNameEncode=topRatedList[i].channeldisplayname  //| encodeUrl; 
         var startTime=topRatedList[i].starttime; 
         var favourite=topRatedList[i].isfavorite; 
         var reminder=topRatedList[i].isreminder; 
         var watchlist=topRatedList[i].iswatchlist; 
         var duration=topRatedList[i].duration; 
         var imageFile=topRatedList[i].imagefilepath; 
         var startTime= topRatedList[i].starttime; 
         var duration= topRatedList[i].duration; 
         var isReco=topRatedList[i].isrecommended;   // This is for reco 


         str+=" <div class='item'>" ; 
         str+="<div class=\"thumb\">"; 
        //  str+="<div ng-show=\""+isReco=='1'+"\" class=\"favorite-ribbon\"></div>"; 
         str+="<div class=\"player\"></div>"; 
         str+="<div class='image' style='background-image:url('"+imageFile+"');'>"; 
         str+="<img src='"+imageFile+"'/>"; 
         str+="<a ng-click=\'playVideo("+program+"\,$event)' ng-show='hasVideo()' class='play' style='cursor:pointer'></a>"; 

         str+= "<a ng-href=\"#!/program/"+programNameEncode+"\" ng-show=\"!hasVideo()\" class=\"noPlay\" ng-click=\"EncodeUrlWithDash("+program+",$event,'programme',"+channelId+","+programId+","+startTime+")\"></a></div>"; 

         str+="<span class='time' ng-show='duration'>\""+duration+"\"</span>"; 

         str+="<div class='user-actions' ng-controller='UserController'>"; 

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

         str+="<a live-tooltip='Reminder Alerts' ng-click='toggleReminder(p, $event)' class='btn btn-small btn-purple-blue' ng-class=\""+{active:reminder == '1'}+"\>"; 
         str+="<i class='icon-reminder'></i></a>"; 

         str+="<a live-tooltip='Add to Watchlist' ng-click='addToWatchlist(p, $event)' class='btn btn-small btn-purple-blue' ng-class=\""+{active:watchlist == '1'}+"\>"; 
         str+="<i class='icon-watchlist'></i></a></div>"; //end of user controller div 

         str+="</div>"; // end of thumb div 

         str+="<div class='text-wrapper'>"; 
         str+="<h2 multiline-overflow><a title='"+program+"' href='#!/program/"+programNameEncode+"' ng-click=\""+"EncodeUrlWithDash("+program+",$event,'programme',"+channelId+","+programId+","+startTime+")"+"/ >\""+program+"\"</a></h2>"; 

         str+="<p class='infoChannel' live-tooltip-single-line= '{{channel}}'><a href='#!/channel/"+channelNameEncode+"' ng-click=\""+"EncodeUrlWithDash("+channel+",$event,'channel',"+channelId+","+programId+")"+"/>\""+channel+"\"</a></p>"; 
         str+="<p class='info'>\""+startTime+"\"</p>"; 

         str+="</div></div>"; //end of the main div 

    //EXTRA LINE 
      //   str+=" <div class='item' ng-repeat='topRatedList[i] in programs.rated' home-tab-item watchable='topRatedList[i]' ></div>" ; 
         alert("The below value is of str") 
         alert(str); 
         angular.element(document.getElementById('space-for-buttons')).append($compile(str)(scope)); 
        } 
        alert("The below value is of str") 

        // The above code is required to append data into the division(loadrated).. 

       } 
      }); 
     }); 
    }; 
}]); 

однако код работает правильно (т.е. она проходит через всю директиву). . Но данные не отображаются, т.е. добавляются.

Вместо этого он переходит в другую директиву, которую я назвал директивой hometab и даю проблемы.

Я не знаю, почему это происходит.

Пожалуйста, помогите мне

Answer 1

Было бы намного проще для вас, чтобы создать Plunker этой проблемы here

Что касается Вашей директивы, не имея полный доступ к файлам, это считается хорошей практикой для проведения все функциональные возможности и стили в рамках его. Поэтому единственное, что должно быть в HTML, - это только элемент директивы. Таким образом, все остальное должно быть в пределах директивы js.

Как хорошо, ваши ng-show/hide имеют очень интенсивные выражения внутри них. Я бы попробовал немного побить. Кроме того, синтаксис HTML с кавычками использует «» в некоторых случаях и «» со смешанными пробелами в других.

Я видел ошибки этого броска в прошлом, хотя он действителен для использования одного или двух. Предпочитаемое использование - это двойные кавычки «» на все в HTML и одинарные кавычки для JS-файлов. Я бы просто удостоверился, что вы используете то или другое, а не то, и другое.

Вы можете проверить эту статью о конкретных правилах here