Angular how to set scope variable from service in right way?

Question

I would like return value from service method into scope to using and processing in template.

But i found, that i cannot use scope in services. I can use Rootscope but i think, that it is not right approach.

How can I easily set value from service into scope?

Thanks for any advice.

Here is code:

/**
      * Init autocomplete dropdown menu for project list
      */
     this.getProjectListForAutocomplete =  function (container, options) {
         $("#autocompleteProjects").kendoAutoComplete({
             dataSource :  {
                 type: "json",
                 serverFiltering: true,
                 transport: {
                     read: function (options) {
                         console.log("List");
                         console.log(options.data);

                         ApiService.doHttpRequest(
                             "POST",
                             $rootScope.apiBaseUrl + "gpsaddress/search",
                             requestParams
                         )
                             .success(function (data, status, headers, config) {

                                         break;
                                 }
                             })
                             .error(function (data, status, headers, config) {

                             });
                     }
                 }
             },
             dataTextField: "city"  ,
             dataValueField: "address.city",
             filter: "contains",
             minLength: 1,
             change  : function (e) {
                 console.log("change");
                 //console.log(e);
             },
             select  : function (e) {
                 console.log("select");
                 var dataItem = this.dataItem(e.item.index());
                 console.log(dataItem);
                 // Here i need set scope in controller
             }
         });
     };

Why don't you make return type method in service and catch return value in scope in controller ? — Anik Islam Abhi
– Anik Islam Abhi, Commented Oct 27, 2014 at 9:18
Modifying a scope object in a service would be bad design since controllers are ment to interact with the scope and services are intended to be independent of ui and scope — Denis Thomas
– Denis Thomas, Commented Oct 27, 2014 at 9:22
@AnikIslamAbhi Could you please add some example? I'm new in Angular. — redrom
– redrom, Commented Oct 27, 2014 at 9:24

sylwester · Accepted Answer · 2014-10-27 09:31:55Z

4

Please see demo below:

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


app.service('dataService', function() {

  var _person = {

    name: "jack",
    surname: "doe"

  }

  return {
    person: _person

  }

})
app.controller('fCtrl', function($scope, dataService) {

  $scope.person = dataService.person;

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>

<div ng-app="app">
  <div ng-controller="fCtrl">
    <p>First Name: {{person.name}}</p>
    <p>Last Name: {{person.surname}}</p>
    Edit First Name:<input type: "text" ng-model="person.name" />
  </div>
</div>

answered Oct 27, 2014 at 9:31

sylwester

16.5k1 gold badge27 silver badges33 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

redrom Over a year ago

I updated question. code where is want to set scope value is nested.

sylwester Over a year ago

@redrom I'm bit confused is that code for your controller or service ? And in which place do you want to edit your variable and in which way ?

redrom Over a year ago

Is it code from service method. I need return JSON object into scope in place where is written //// Here i need set scope in controller

Mukund Kumar · Accepted Answer · 2014-10-27 09:27:03Z

1

first Method :

in service :

serviceMethod: functon(scope){
   //processing
   scope.scopeVar=data;
}

in controller:

  service.serviceMethod($scope);

when controller call serviceMethod of service. after processing data is assign to scope.scopeVar.here scope refer to $scope object.(we are passing object $scope to serviceMethod method)

2nd Method-

in service :

serviceMethod: functon(){
   //processing
   returndata;
}

in controller:

  $scope.scopeVar=service.serviceMethod();

answered Oct 27, 2014 at 9:27

Mukund Kumar

23.5k20 gold badges64 silver badges85 bronze badges

1 Comment

Chandermani Over a year ago

The first method is just bad implementation, and should not be used. Second method is fine. There is a third method which is far too common, where service returns a promise instead of actual data. That example also can be added.

Coldstar · Accepted Answer · 2014-10-28 08:28:16Z

0

You dont "set-scope-variable-from-service" you BIND to it. Its the same semantic really. @sss is totally correct

answered Oct 28, 2014 at 8:28

Coldstar

1,3511 gold badge12 silver badges33 bronze badges

Collectives™ on Stack Overflow

Angular how to set scope variable from service in right way?

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

3 Comments

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related