如何将数据从AngularJS控制器发送到其服务?

如何将数据从AngularJS控制器发送到其服务?

问题描述:

我有我的页面元素像这样如何将数据从AngularJS控制器发送到其服务?

<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从控制器发送到我的服务?我尝试了几个教程,但他们都不一样,我完全迷失了。任何人都可以用简单的方式向我解释这一点,并展示如何做到这一点? 可能需要提供一些其他信息?谢谢。

+7

最好去通过文档https://docs.angularjs.org/guide/services –

+0

我会的,但我希望得到一些简单的例子也是如此。 Thanx先生,Mr_Perfect。很好的登录btw。 – Bobby

+0

你的服务是什么?项目? –

我尽量不使用示波器,因此我会在控制器上为该点击创建一个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>

您必须使用$http服务。 $http服务便于与远程HTTP服务器进行通信。

$http服务使用then方法为了附加callback

then()方法有两个参数:一个successerror回调将与响应对象被调用。

使用then()方法,将callback函数附加到返回的promise

事情是这样的:

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 
} 

您必须在控制器内部注入服务以将一些数据传递给它。

app.controller.js

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

请参考this的更多信息,创建和在角注册的服务。