Question

我正在使用这个投票应用程序，我实现了一个facebook登录按钮我选择在用户连接时显示一些按钮，因此必须启用投票但我的ng-click按钮不起作用请帮忙

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-repeat的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-click按钮无效请求帮助

Answer 1

示例未完成，我刚刚从您的代码中提取。但想法是展示如何避免使用innerHTML进行dom操作。请注意，我使用新控制器'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;
    } 

}]);

.innerHTML函数在angular JS中不起作用

1 个答案: