(服务)功能按下按钮不起作用

时间:2022-11-06 15:23:29

I seem to be having an issues using a service. I created a controller file and added a service above it. I injected the service into the controller and am trying to access one of the service's functions. I am calling the function using a button. The problem is when I press the button nothing happens. I have tried testing the result by outputting to the console but nothing is working.

我似乎遇到了使用服务的问题。我创建了一个控制器文件并在其上面添加了一个服务。我将服务注入控制器,并尝试访问服务的其中一个功能。我正在使用按钮调用该函数。问题是当我按下按钮没有任何反应。我已经尝试通过输出到控制台测试结果,但没有任何工作。

Here is some of the controller, the rest doesn't matter to the example.

这是一些控制器,其余的与示例无关。

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

and here is the button

这是按钮

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

3 个解决方案

#1


0  

Two things you will definitely need to change first:

你必须先改变两件事:

You need to add [] after your app definition so it will be:

您需要在应用定义后添加[],这样它将是:

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

You need to include candidateId in your array of dependencies in your controller definition:

您需要在控制器定义中的依赖项数组中包含candidateId:

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

Here is an example plnkr

这是一个例子plnkr

#2


0  

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

#3


0  

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

I got a minimal sample working in plunkr.

我得到了一个在plunkr工作的最小样本。

You did not inject the service into your controller:

您没有将服务注入您的控制器:

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

You have to declare the names of the services your controller needs in the array. This is because js minimizers like uglifyjs sometimes mangle parameter names, but angular needs to know the names of the services so it can locate them. You requested the candidateId service, but did not declare it as an import.

您必须声明控制器在阵列中需要的服务的名称。这是因为像uglifyjs这样的js最小化器有时会破坏参数名称,但是角度需要知道服务的名称,以便它可以找到它们。您请求了candidateId服务,但没有将其声明为导入。

I also had to update your module declaration:

我还必须更新你的模块声明:

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

The empty array tells angular that you are declaring a new module that has no dependencies (the array is a list of dependencies). Without the array, angular looks for an existing module named DonationWebApp and doesn't find it.

空数组告诉angular你声明一个没有依赖项的新模块(该数组是依赖项列表)。如果没有数组,angular会查找名为DonationWebApp的现有模块,但找不到它。

If this doesn't help, we would need to see a more full example or see what error messages you are getting.

如果这没有帮助,我们需要查看更完整的示例或查看您收到的错误消息。

The controller you posted doesn't seem complete so I had to speculate on what your data model might look like. Make sure you spelled everything correctly in your template.

您发布的控制器似乎不完整,所以我不得不推测您的数据模型可能是什么样子。确保在模板中正确拼写所有内容。

#1


0  

Two things you will definitely need to change first:

你必须先改变两件事:

You need to add [] after your app definition so it will be:

您需要在应用定义后添加[],这样它将是:

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

You need to include candidateId in your array of dependencies in your controller definition:

您需要在控制器定义中的依赖项数组中包含candidateId:

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

Here is an example plnkr

这是一个例子plnkr

#2


0  

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

#3


0  

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

I got a minimal sample working in plunkr.

我得到了一个在plunkr工作的最小样本。

You did not inject the service into your controller:

您没有将服务注入您的控制器:

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

You have to declare the names of the services your controller needs in the array. This is because js minimizers like uglifyjs sometimes mangle parameter names, but angular needs to know the names of the services so it can locate them. You requested the candidateId service, but did not declare it as an import.

您必须声明控制器在阵列中需要的服务的名称。这是因为像uglifyjs这样的js最小化器有时会破坏参数名称,但是角度需要知道服务的名称,以便它可以找到它们。您请求了candidateId服务,但没有将其声明为导入。

I also had to update your module declaration:

我还必须更新你的模块声明:

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

The empty array tells angular that you are declaring a new module that has no dependencies (the array is a list of dependencies). Without the array, angular looks for an existing module named DonationWebApp and doesn't find it.

空数组告诉angular你声明一个没有依赖项的新模块(该数组是依赖项列表)。如果没有数组,angular会查找名为DonationWebApp的现有模块,但找不到它。

If this doesn't help, we would need to see a more full example or see what error messages you are getting.

如果这没有帮助,我们需要查看更完整的示例或查看您收到的错误消息。

The controller you posted doesn't seem complete so I had to speculate on what your data model might look like. Make sure you spelled everything correctly in your template.

您发布的控制器似乎不完整,所以我不得不推测您的数据模型可能是什么样子。确保在模板中正确拼写所有内容。