.innerHTML function not working in angular JS

Question

I have this voting app am working on that i implented a facebook login button i choosed to show some button when the user is connected so has to be enabled to vote however my ng-click button is not working please help

the html script tag

       // 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 = '';
   }

the html body with ng-repeat

    <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>

the controller in the 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;
        }
    });

}]);

the ng-click button is not working please help

Best way is to write custom directives with templates attached. use ng-if/ ng-show to hide and show the elements base on status of the app — erandac
– erandac, Commented Nov 13, 2014 at 12:57
please how do i do that.. can you give me a sample code for that.. thanks — Abiodun
– Abiodun, Commented Nov 13, 2014 at 16:40
Avoid using innerHTML for dom manipulation. Instead declare all possible element in your template/body. For instance, 'not_authorized' status message also available in your html file. Visibility of such a elements could control by ng-if directives. eg: ng-if="notAuthorized". In your controller, declare required variables and maintain the state accordance. Simply, When the FB logging failed, you set the notAuthorized = true. And your dom element might look like this => <span ng-if="notAuthorized">You Are Not Logged In ... Please Login To Vote!'</span> — erandac
– erandac, Commented Nov 14, 2014 at 5:32
can you please just paste me a sample code on how my controller will look like.. will really appreciate.. thanx in anticipation — Abiodun
– Abiodun, Commented Nov 14, 2014 at 9:15

erandac · Accepted Answer · 2014-11-14 11:22:47Z

The example is not completed, I just extracted from your code. but idea is to show how you can avoid using innerHTML for dom manipulation. Note that I warped the html with new controller 'LoginCtrl' it is supposed to implement the login logic.

I was wondering why your adding the vote button element with innerHTML, but you can simply declare it in template. Check the following template.

Body 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>

Controller:

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

}]);

can you please edit this code to include the facebook api and how it will work.. sorry if this is a lot of work but am preety new to angularjs and facebook sdk.. thank you so much for your help so far

Collectives™ on Stack Overflow

.innerHTML function not working in angular JS

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related