AngularJSコントローラからそのサービスにデータを送信する方法は？

Question

私はこの

<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> 

私のコントローラのような要素との私のページを持っているが、このようになりますと、正常に動作します

'use strict'; 

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

が、私はidのアラートを取得する方法があります。しかし、私はこのIDをコントローラーから私のサービスにどのように送っていますか？私はいくつかのチュートリアルを試してみましたが、それらはすべて異なっており、完全に失われてしまいました。誰もが簡単な方法でこれを私に説明し、これを行う方法を示すことができますか？ 追加情報を提供する必要がありますか？ありがとう。

Answer 1

私はスコープを使用しないようにしていますので、コントローラのそのクリックに対してfunctionを作成します。それから、あなたが望むことをやるだけの問題です。

<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

$httpサービスを利用する必要があります。 $httpサービスは、リモートHTTPサーバーとの通信を容易にします。

$httpサービス使用then方法を添付するために、callbackを添付してください。 successおよび応答オブジェクトに呼び出されるコールバックerror：

は

then()方法は2つの引数を取ります。

then（）メソッドを使用して、promiseにcallback関数を追加します。

このような何か：

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

    },function (error){ 
    }); 
} 

は方法もご利用いただけます参照here

ショートカットを参照してください。

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

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

Answer 3

あなたはそれにいくつかのデータを渡すために、コントローラ内のサービスを注入する必要があります。

app.controller.js

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

角度でサービスを作成し、登録の詳細については、thisを参照してください。