javascript - Angular 如何以正确的方式从服务设置范围变量？

Question

我想从服务方法返回值到模板中使用和处理的范围。

但我发现，我无法在服务中使用范围。 我可以使用 Rootscope，但我认为这不是正确的方法。

如何轻松地将服务的值(value)设置到范围中？

感谢您的任何建议。

代码如下:

/**
      * 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
             }
         });
     };

Answer 1

请看下面的演示:

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>