（サービス）ボタンを押しても機能しない

Question

サービスを利用する際に問題が発生しているようです。私はコントローラファイルを作成し、その上にサービスを追加しました。私はコントローラにサービスを注入し、サービスの機能の1つにアクセスしようとしています。ボタンを使って関数を呼び出しています。問題は何も起こらずにボタンを押したときです。私はコンソールに出力して結果をテストしようとしましたが、何も動いていません。

ここではコントローラの一部ですが、残りの部分は例に関係ありません。

var app = angular.module('DonationWebApp'); 

app.service('candidateId', function() { 
    var candidateID = 0; 

    var addID = function(id){ 
     candidateID = id; 
    }; 

    var getID = function() { 
     return candidateID; 
    }; 

    return { 
     addID : addID, 
     getID : getID 
    } 

}); 


app.controller('candidatesController', ['$scope','$location', '$http', function($scope, $location, $http, candidateId) { 
    // create a message to display in our view 
    $scope.message = 'Here are all the candidates'; 


    findAll(); 
    findSupporters(); 
    var display = true; 
    var isHidden = true; 

    $scope.addCandidateID = function(id) { 
     candidateId.addID(id); 
    } 
}]); 

、ここでボタンを使用すると、間違いなく最初に変更する必要があります

<button type="button" class="btn btn-default" ng-click="addCandidateID(candidate._id)"> 
    <span class="glyphicon glyphicon-remove"></span> Edit 
</button> 

Answer 1

2つのことです：

あなたはそれがされるので、アプリの定義の後[]を追加する必要があります。

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

依存関係の配列にcandidateIdを含める必要がありますお使いのコントローラの定義の中でS：

app.controller('candidatesController', ['$scope','$location', '$http', 'candidateId', function($scope, $location, $http, candidateId) { 
    ... 
}]); 

ここでは、私がplunkrで働い最小限のサンプルを得た例plnkr

Answer 2

var app = angular.module('DonationWebApp',[]); 
    app.service('candidateId', function() { 
    var candidateID = 0; 

    var addID = function(id){ 
     candidateID = id; 
    }; 

    var getID = function() { 
     return candidateID; 
    }; 

    return { 
     addID : addID, 
     getID : getID 
    } 

    }); 

      app.controller('candidatesController', function($scope, $location, $http, candidateId) { 
      // create a message to display in our view 
     $scope.message = 'Here are all the candidates'; 


     findAll(); 
     findSupporters(); 
     var display = true; 
     var isHidden = true; 

     $scope.addCandidateID = function(id) { 
     candidateId.addID(id); 
     } 
    }); 

Answer 3

https://plnkr.co/edit/OsnmPzMTkBb88JrxacjL?p=preview

です。

あなたのコントローラにサービスを挿入しませんでした：

app.controller('candidatesController', ['$scope','$location', '$http', 'candidateId', function($scope, $location, $http, candidateId) { 
    ... 
    }]); 

あなたのコントローラは、アレイに必要なサービスの名前を宣言しなければなりません。これは、uglifyjsのようなjs minimizerがパラメータ名を変更することがありますが、角度が必要なサービスの名前を知る必要があるためです。あなたはcandidateIdサービスをリクエストしましたが、それをインポートとして宣言しませんでした。

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

空の配列を使用すると、依存関係がない新しいモジュールを宣言していることを、角度伝えますが、（配列が依存関係のリストです）：

私はまた、あなたのモジュール宣言を更新しなければなりませんでした。配列がなければ、AngeringはDonationWebAppという名前の既存のモジュールを探し、見つからない。

これで解決できない場合は、さらに詳しい例をご覧いただくか、表示されるエラーメッセージを確認する必要があります。

投稿したコントローラーが完全ではないように見えるので、データモデルの外観を推測する必要がありました。あなたのテンプレートにすべてのスペルが正しいことを確認してください。