각도 js에 HTML을 추가하여 오류가 발생했습니다

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 지시어를 호출하고 문제를 제기하는 다른 지시문을 사용합니다.

왜 이런 일이 발생하는지 알지 못합니다.

당신이 파일에 대한 전체 액세스 권한을하지 않고, 당신의 지시에 관하여이 문제 here

에 대한 Plunker를 작성하는 것이 훨씬 쉬울 것

Answer 1

이, 그것은 좋은 연습 간주됩니다 개최

밖으로 제발 도와주세요 그것의 범위 내의 모든 기능과 스타일. 따라서 HTML에 있어야하는 것은 지시어 요소뿐입니다. 다른 모든 것은 지시어 js 안에 있어야합니다.

마찬가지로 ng-show/hide에는 매우 집중적 인 표현이 있습니다. 나는 조금만 노력하고 시도 할 것이다. 또한 따옴표가있는 HTML 구문은 일부 인스턴스에서는 ""을 사용하고 다른 인스턴스에서는 혼합 된 공백을 사용합니다.

과거에는이 오류를 보았지만 단일 또는 이중을 사용하는 것이 유효합니다. 선호하는 사용법은 HTML의 모든 것에 대한 큰 따옴표와 JS 파일에 대한 작은 따옴표입니다. 나는 당신이 둘 중 하나만 사용하고 다른 하나만 사용하고 있는지 확인합니다.

당신은 특정 규칙에 대한이 문서를 확인할 수 있습니다 here