11

I have the following controller: 

'use strict';

  /* Controllers */

  angular.module('stocks.controllers', []).
    controller('MyCtrl1', ['$scope', '$http', 'stockData', function MyCtrl1 ($scope, $http, stockData) {

        $scope.submit = function() {




        $scope.info = stockData.query();
        console.dir($scope.info);
        }

    }]);

and i want to pass a bound ng-model that sits in my view called ng-model="symbol_wanted" to the following service...

'use strict';

    /* Services */

    angular.module('stocks.services', ['ngResource']).factory('stockData', ['$resource',
      function($resource){
        return $resource('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22YHOO%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json', {}, {
        query: {method:'GET', isArray:false}
      });
    }]);

how do i connect the controller's scope to get passed into the service? thanks!

Davin Tryon
  • 66,517
  • 15
  • 143
  • 132
Sunny Day
  • 523
  • 2
  • 8
  • 16
  • when? Have you defined a function to be called on an `ng-click`? – Davin Tryon Nov 02 '13 at 23:01
  • The question is strange, as it assumes you can't just do: `myService($scope)`. The rest of comments and answers are showing different `angularjs` patterns instead of answering what is asked in the title. – Léon Pelletier Mar 04 '15 at 16:24

2 Answers2

13

how do i pass scope from controller to service in angularjs?

You can't inject $scope into services, there is no such thing as a Singleton $scope.

i want to pass a bound ng-model that sits in my view called ng-model="symbol_wanted" to the following service...

You can call the service and pass parameters this way:

    .factory('stockData', ['$resource', '$q', function ($resource, $q) {

    var factory = {
        query: function (value) {

            // here you can play with 'value'

            var data = $resource('http://query.yahooapis.com/v1/public/yql?q=select%20*%20from%20yahoo.finance.quotes%20where%20symbol%20in%20(%22YHOO%22)%0A%09%09&env=http%3A%2F%2Fdatatables.org%2Falltables.env&format=json', {}, {
                query: {
                    method: 'GET',
                    isArray: false
                }
            });
            var deferred = $q.defer();
            deferred.resolve(data);
            return deferred.promise;
        }

    }
    return factory;
}]);

So we call this service and get a promise back like this:

 stockData.query(value) // <-- pass value
        .then(function (result) {
        $scope.data = result;            
    }, function (result) {
        alert("Error: No data returned");
    });

BTW, I'd suggest you use $http.get:

Demo Fiddle

Herb Caudill
  • 50,043
  • 39
  • 124
  • 173
Maxim Shoustin
  • 77,483
  • 27
  • 203
  • 225
  • i did this and i get Error: $scope is not defined. how do i access $scope.symbol_wanted in the controller? – Sunny Day Nov 02 '13 at 23:14
  • in controller or service? from your example `$scope` is defined – Maxim Shoustin Nov 02 '13 at 23:15
  • i implemented your code, and its not alerting or setting off errors in the console tab, but i don't see any data coming back from the ajax call. – Sunny Day Nov 02 '13 at 23:32
  • i also added $q next to $resource in the controller. – Sunny Day Nov 02 '13 at 23:33
  • also the value is passing as it should. – Sunny Day Nov 02 '13 at 23:34
  • Maxim why do you recommend to use $http instead of a resource ? – sarunast Feb 03 '14 at 16:06
  • 1
    @Tamy Generally its two diff things and it bases on your goals. The `$http` you can configure `POST` `GET` and it works like ajax request as we know from jQuery. For `$resource` you can configure request to get specific data based on parameters we pass. For example if on server side we have json object and I dont want to get full json but one object with id=7 for example. So I can configure $resource to get only object with id 7 automatically with no logic on server side. – Maxim Shoustin Feb 03 '14 at 16:10
  • @Tamy Forgot main thing: for `resource` should be RESTful server-side data sources – Maxim Shoustin Feb 03 '14 at 16:20
4

Your ng-model value will automatically become a scope property. So, you can just use this in your controller to get the current value:

$scope.symbol_wanted;

So, let's say that you have a function to handle the click in your controller:

$scope.handleMyClick = function() {

    stockData.query($scope.symbol_wanted);
}

You can just use the scoped property.

Davin Tryon
  • 66,517
  • 15
  • 143
  • 132