upvotesとdownvotesを制御する指令

Question

私はカードのダイナミックな束のためのupvote/downvote制御システムを開発しています。

私はchecked = trueとchecked = false値をのimgにクリックが、私が見つけたと予想されるように私のコードは動作しないため、問題は、私はng-modelで私の値を更新することはできませんであればcontrollので、次のことができます関数が呼び出される時刻は同じ値を受け取ります。また、新しい値を正しく更新して表示することはできません。同様に、動作する唯一のカードは最初のものです（動的ではありません）。

私が働いていたことはすべて、このplunkにあります。

非常に新しい角度の男として、私はできるだけ調査して読み込もうとしましたが、これは正しい方法であると100％も確信していないので、私はこれを行う他の方法パフォーマンスとクリーンなコード。ここで私は、私が実際に達成したものを貼り付ける怒鳴る：

index.htmlを

<card-interactions class="card-element" ng-repeat="element in myIndex.feed"> 
    <label class="rating-upvote"> 
    <input type="checkbox" ng-click="rate('upvote', u[element.id])" ng-true-value="1" ng-false-value="0" ng-model="u[element.id]" ng-init="element.user_actions.voted === 'upvoted' ? u[element.id] = 1 : u[element.id] = 0" /> 
    <ng-include src="'upvote.svg'"></ng-include> 
    {{ element.upvotes + u[1] }} 
    </label> 
    <label class="rating-downvote"> 
    <input type="checkbox" ng-click="rate('downvote', d[element.id])" ng-model="d[element.id]" ng-true-value="1" ng-false-value="0" ng-init="element.user_actions.voted === 'downvoted' ? d[element.id] = 1 : d[element.id] = 0" /> 
    <ng-include src="'downvote.svg'"></ng-include> 
    {{ element.downvotes + d[1] }} 
    </label> 
    <hr> 
</card-interactions> 

index.js

'use strict'; 

var index = angular.module('app.index', ['index.factory']); 

index.controller('indexController', ['indexFactory', function (indexFactory) { 

    var data = this; 

    data.functions = { 
     getFeed: function() { 
     indexFactory.getJSON(function (response) { 
      data.feed = response.index; 
     }); 
     } 
    }; 

    this.functions.getFeed(); 
    } 

]); 

index.directive('cardInteractions', [ function() { 
    return { 
    restrict: 'E', 
    link: function (scope, element, attrs) { 
     scope.rate = function(action, value) { 
     var check_up = element.find('input')[0]; 
     var check_down = element.find('input')[1]; 
     if (action === 'upvote') { 
      if (check_down.checked === true) { 
       check_down.checked = false; 
      } 
     } else { 
      if (action === 'downvote') { 
      if (check_up.checked === true) { 
       check_up.checked = false; 
      } 
      } 
     } 
     } 
    } 
    }; 
}]); 

をあなたたちはこれで私を助けることができる願っています。 すべての貢献を感謝します。

アドバイスありがとうございます。

Answer 1

私は魔法のように動作している https://plnkr.co/edit/HvcBv8XavnDZTlTeFntv?p=preview

index.directive('cardInteractions', [ function() { 
    return { 
    restrict: 'E', 
    scope: { 
     vote: '=' 
    }, 
    templateUrl: 'vote.html', 
    link: function (scope, element, attrs) { 

     scope.vote.upValue = scope.vote.downValue = 0; 

     if(scope.vote.user_actions.voted) { 
     switch(scope.vote.user_actions.voted) { 
      case 'upvoted': 
      scope.vote.upValue = 1; 
      break; 
      case 'downvoted': 
      scope.vote.downValue = 1; 
      break; 
     } 
     } 

     scope.upVote = function() { 
     if(scope.vote.downValue === 1) { 
      scope.vote.downValue = 0; 
      scope.vote.downvotes--; 
     } 

     if(scope.vote.upValue === 1) { 
      scope.vote.upvotes++; 
     } else { 
      scope.vote.upvotes--; 
     } 
     }; 

     scope.downVote = function() { 
     if(scope.vote.upValue === 1) { 
      scope.vote.upValue = 0; 
      scope.vote.upvotes--; 
     } 

     if(scope.vote.downValue === 1) { 
      scope.vote.downvotes++; 
     } else { 
      scope.vote.downvotes--; 
     } 
     }; 
    } 
    };