.innerHTML 기능이 각도 JS에서 작동하지 않습니다

Question

나는이 투표 응용 프로그램을 사용하여 페이스 북 로그인 버튼을 암시했습니다. 사용자가 연결되었을 때 일부 버튼을 표시하도록 선택 했으므로 투표가 가능해야하지만, 클릭 버튼을 도와주세요 작동하지 않습니다

는 HTML 스크립트 태그

 // for FB.getLoginStatus(). 
    if (response.status === 'connected') { 
     // Logged into your app and Facebook. 
     var elems = document.getElementsByClassName("voters"); 
for(i=0; i<elems.length; i++){ 

     elems[i].innerHTML("<div class='selector'> <a class='btn btn-lg btn-warning' ng-click='upVote(item)'><b> VOTE</b></a></div>"); 
     $compile(elems[i])($scope); 
     } 
     testAPI(); 
    } 
    else if (response.status === 'not_authorized') 
    { 
     // The person is logged into Facebook, but not your app. 
     //document.getElementById('status').innerHTML = 'Please log ' + 
     // 'into this app.'; 

     document.getElementById('status').innerHTML = 
     'You Are Not Logged In ... Please Login To Vote!'; 
    var elems = document.getElementsByClassName("voters"); 
for(i=0; i<elems.length; i++){ 
     elems[i].innerHTML = ''; 
    } 
    } else { 

     document.getElementById('status').innerHTML = 
     'You Are Not Logged In ... Please Login To Vote!'; 
     // The person is not logged into Facebook, so we're not sure if 
     // they are logged into this app or not. 
    var elems = document.getElementsByClassName("voters"); 
for(i=0; i<elems.length; i++){ 
     elems[i].innerHTML = ''; 
    } 

NG 반복과 HTML 본문

<div class="col-md-3" ng-repeat="item in contestant | filter: search | orderBy:artistOrder:direction" style="margin-bottom:30px"> 
     <div class="row text-center"> 
     <p> 
      <img ng-src="uploads/{{item.ImageUrl}}" class="vote-img"> 

      </p> 
     </div> 
     <div class="row "> 
      <div class="col-md-6 text-center"> 
       <p class="contest-text">{{item.Name}}</p> 
      </div> 
       <div class="col-md-6 text-center"> 
       <p class="contest-text"><span class="glyphicon glyphicon-thumbs-up"> {{item.Votes}} Votes </span></p> 
      </div> 
     </div> 
       <div class="row text-center"> 
<p class="contest-text voters"><!--<a class="btn btn-lg btn-warning" ng-click="upVote(item);"><b> VOTE</b></a>--> </p> 
     </div> 
    </div> 

AngularJS와

var artistController = angular.module("artistController", []); 


/* artistController.directive('ngbutton', function() { 
    return { 
     restrict: "E", 
     template: "<a class='btn btn-lg btn-warning' data-ng-click='upVote(item)'><b> VOTE</b></a>" 
    }; 
    });*/ 

artistController.controller("ListController", ['$scope', '$http',function($scope, $http){ 

    $http.get('ajax/getContestant.php').success(function(data){ 


     $scope.contestant = data; 
      // $scope.artistOrder = 'name'; 
    }); 
    $scope.upVote = function(item){ 

    item.Votes++; 
    updateVote(item.ID,item.Votes); 
    }; 

    function updateVote(id,votes){ 
    $http.post('ajax/updateVote.php?id='+id+'&votes='+votes); 
    } 

}]); 
artistController.controller("DetailsController", ['$scope', '$http','$routeParams',function($scope, $http,$routeParams){ 

    $http.get('js/data.json').success(function(data){ 


     $scope.artists = data; 
     $scope.whichItem = $routeParams.itemID; 

     if ($routeParams.itemID > 0) { 

      $scope.prevItem = Number($routeParams.itemID) -1; 
     } 
     else{ 

      $scope.prevItem = $scope.artists.length -1; 
     } 

if ($routeParams.itemID < $scope.artists.length -1) { 

      $scope.nextItem = Number($routeParams.itemID) +1; 
     } 
     else{ 

      $scope.nextItem = 0; 
     } 
    }); 

}]); 

NG-버튼을 클릭에

컨트롤러는 예제는 그냥 코드에서 추출 완료되지

Answer 1

도움을 주시기 바랍니다 작동하지 않습니다. 하지만 아이디어는 당신이 돔 조작에 innerHTML을 사용하는 것을 피할 수있는 방법을 보여줍니다. 로그인 로직을 구현하기로되어있는 새로운 컨트롤러 'LoginCtrl'을 사용하여 html을 뒤틀린 것에 유의하십시오.

innerHTML을 사용하여 투표 버튼 요소를 추가하는 이유가 궁금했지만 단순히 템플릿에서 선언 할 수 있습니다. 다음 템플릿을 확인하십시오.

바디 HTML :

<div ng-controller="LoginCtrl"> 

    <!-- auth user section --> 
    <div ng-if="!notAuthorized" > 
     <div ng-controller="ListController" > 
      <div class="col-md-3" ng-repeat="item in contestant | filter: search | orderBy:artistOrder:direction" style="margin-bottom:30px"> 
       <div class="row text-center"> 
        <p> 
         <img ng-src="uploads/{{item.ImageUrl}}" class="vote-img"> 
        </p> 
       </div> 
       <div class="row "> 
        <div class="col-md-6 text-center"> 
         <p class="contest-text">{{item.Name}}</p> 
        </div> 
        <div class="col-md-6 text-center"> 
         <p class="contest-text"><span class="glyphicon glyphicon-thumbs-up"> {{item.Votes}} Votes </span></p> 
        </div> 
       </div> 
       <div class="row text-center"> 
        <div class="contest-text voters"> 

        <!-- I extarcted the html from javascript code --> 
         <div class='selector'> <a class='btn btn-lg btn-warning' ng-click='upVote(item)'><b> VOTE</b></a></div> 
        </div> 
       </div> 
      </div> 
      <div ng-repeat="item in voters" class='selector'> <a class='btn btn-lg btn-warning' ng-click='upVote(item)'><b> VOTE</b></a></div> 
     </div> 
    </div> 

    <!-- login section (not auth) --> 
    <div ng-if="notAuthorized"> 
     You Are Not Logged In ... Please Login To Vote! 
    </div> 

</div> 

컨트롤러 :

artistController.controller("LoginCtrl",['$scope',function($scope) 
{ 
    $scope.notAuthorized = true; 

    var response = {}; //TODO init FB response 

    // for FB.getLoginStatus(). 
    if (response.status === 'connected') 
    { 
     // Logged into your app and Facebook. 
     $scope.notAuthorized = false; 
    } 

}]);