我是angularjs的新手，并试图在点击事件的视图中附加数据。
以下是我写的代码：
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指令并给出问题的指令。
我不知道为什么会这样。
请帮帮我
答案 0 :(得分：0)
为此问题创建一个Plunker会更容易here
关于您的指令，如果没有对文件的完全访问权限，将所有功能和样式保留在其范围内是一种良好的做法。因此，HTML中唯一应该是指令元素。因此，其他所有内容都应该在指令js中。
同样，你的ng-show/hide内有非常密集的表达方式。我会试着把它们剁碎一下。此外，带引号的HTML语法正在使用＆＃34; ＆＃34;在某些情况下和＆＃39; ＆＃39;在其他人的混合空间。
我在过去看过这个抛出错误，但使用single或double是有效的。首选用法是双引号＆＃34;＆＃34;关于HTML中的所有内容和JS文件的单引号。我只是确保你使用的是其中之一而不是两者。
您可以查看有关特定规则here
的文章