Wie sendet man Daten vom AngularJS Controller an seinen Dienst?

Question

Ich habe meine Seite mit dem Element wie dieses

<div ng-app="myApp" class="ng-cloak" ng-controller="MyController as ctrl"> 
     <div class="item" ng-repeat="i in ctrl.items">     
      <h3>Some text...</h3> 
      <p ng-bind="i.id"></p> 
      <button ng-click="alertValue(i.id)">DETAILS</button></p>     
     </div> 
</div> 

Mein Controller sieht wie folgt aus und hat eine Methode

'use strict'; 

    App.controller('MyController', ['$scope', 'Item', function ($scope, Item) { 
      $scope.alertValue = function (id) { 
       alert('clicked:' + id); 
      } 
    } 

der gut arbeitet, ich habe die Warnung mit der ID erhalten. Aber wie sende ich diese ID vom Controller zu meinem Dienst? Ich habe versucht, ein paar Tutorials zu folgen, aber sie sind alle verschieden und ich habe mich total darin verlaufen. Kann mir das jemand auf einfache Weise erklären und zeigen, wie das geht? Kann ich einige zusätzliche Informationen zur Verfügung stellen? Vielen Dank.

Answer 1

Ich versuche nicht, Scope zu verwenden, also würde ich ein function für das Klicken auf meinem Controller erstellen. Dann geht es nur darum, was du damit machen willst.

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<script> 
 
    angular.module('my-app', []) 
 
    .service('Items', function() { 
 
    return { 
 
     doWork: function(id) { 
 
     console.log(id); 
 
     } 
 
    }; 
 
    }) 
 
    .controller('ItemsCtrl', function(Items) { 
 
    var vm = this; 
 
    vm.items = [ 
 
     { id: 1, name: 'Foo' }, 
 
     { id: 2, name: 'Bar' }, 
 
     { id: 3, name: 'Baz' }, 
 
    ]; 
 
    
 
    vm.doWork = function(id) { 
 
     Items.doWork(id); 
 
    }; 
 
    }); 
 
</script> 
 

 

 

 
<div ng-app="my-app"> 
 
    <div ng-controller="ItemsCtrl as ctrl"> 
 
    <ul> 
 
     <li ng-repeat="item in ctrl.items"> 
 
     {{item.name}} 
 
     <button ng-click="ctrl.doWork(item.id)">Do Work</button> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</div>

Answer 2

Sie müssen $http Service verwenden. $http Service erleichtert die Kommunikation mit den Remote-HTTP-Servern.

$http Service verwenden then Methode, um eine callback anhängen.

then() Die Methode nimmt zwei Argumente: ein success und ein errorRückruf, die mit einem Response-Objekt aufgerufen werden.

Fügen Sie mit der then() - Methode eine callback-Funktion an die zurückgegebene promise an.

Etwas wie folgt aus:

app.controller('MainCtrl', function ($scope, $http){ 
    $http({ 
    method: 'GET', 
    url: 'api/url-api' 
    }).then(function (success){ 

    },function (error){ 
    }); 
} 

Siehe Referenz here

Shortcut Methoden sind ebenfalls erhältlich.

$http.get('api/url-api').then(successCallback, errorCallback); 

function successCallback(response){ 
    //success code 
} 
function errorCallback(error){ 
    //error code 
} 

Answer 3

Sie müssen den Dienst in den Controller injizieren, um einige Daten an ihn zu übergeben.

app.controller.js

App.controller('MyController', ['$scope', 'ItemService', function ($scope, ItemService) { 
     $scope.alertValue = function (id) { 
      ItemService.id = id;  
     } 
} 

Bitte beachten this Weitere Informationen zum Erstellen und einen Dienst in Winkel Registrierung.