2016-07-10 27 views
0

hier ohne Umweg ist mein service.js:

app.service('myService',['$http',function($http){ 
    this.getSomething = function($scope){ 
     return $http({ 
      method: "GET", 
      url: "...", 
      headers: {...} 
     }).success(function(response){ 
      $scope.items = response; 
     }).error(function(response){ 
      ... 
     }); 
    } 
}]); 

Hier mein controller.js ist:

app.controller('myController',['$scope','myService',function($scope,myService){ 
    $scope.items = {}; 
    myService.getSomething($scope); 
}]); 

Aber ich frage mich, ist es eine andere Möglichkeit, Web API zu nutzen, ohne den '$ scope' an die Funktion im Service zu übergeben? Zum Beispiel so (habe ich versucht, dies aber nicht):

... 
this.getSomething = function(){ 
    return $http({ 
     ... 
    }).success(function(response){ 
     return response; 
    }).error ... 
     ... 
} 

dann in der Steuerung:

... 
$scope.items = myService.getSomething(); 
+0

Ich schlage vor, Sie verwenden 'dann' anstelle von 'Erfolg' Funktion. siehe http://blog.ninja-squad.com/2015/05/28/angularjs-promises/ und https://www.peterbe.com/plog/promises-with-$http –

Antwort

0

Ja, Sie die $http Dienste nutzen können, ohne sie in einem Controller zu sein.
Sie können die http-Aufrufe in einen Service oder eine Factory stellen.

Beispiel

app.service('MyHttpService', function($http) { 
    this.getData = function(id) { 
    $http.get(<URL>, <PARAMS>).then(function(success) { 
     return success; 
    }, function(err) { 
     return err; 
    }); 
    } 
}); 

// In you Controller 

app.controller('MyCtrl', function(MyHttpService){ 
    $scope.data = getData .getData(); 
}) 

Dies ist ein nur ein einfaches Beispiel Sie diese MyHttpService umgehend ein Versprechen robuster machen und die Daten nicht direkt;

0

Ja, vorwärts, es ist am besten, $ scope im Allgemeinen nicht zu verwenden, aber Sie müssen es definitiv nicht an den Dienst weitergeben. Dies ist in der Regel, wie ich meine Dienste/Controller modelliere.

Service:

//Using es6 syntax 
this.getData() { 
    return $http.get('/api/') 
     .then(({data}) => data) 
     .catch(({data}) => console.log('FAILED: ', data.message)); 
} 

//es5 
this.getData() { 
    return $http.get('/api/') 
     .then(function(res) { 
      return res.data 
     }) 
     .catch(function(res) { 
      console.log('FAILED: ', res.data.message)); 
     }); 
} 

Controller:

//es6 
apiService.getData() 
    .then(data => this.data = data); 

//es5 
apiService.getData() 
    .then(function(data){ 
    this.data = data; 
    }); 
0

Sie sollten nicht mehr als $ Umfang an den Service werden übergeben. $ scope wird im Controller verwendet, um an die Ansicht zu binden.

app.controller('myCtrl', function($scope, service) { 

    $scope.items = service.getItems(); 

}); 

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

    this.getItems() { 
    return $http.get('/api/items') 
    .then(function(res) { 
     return res.data 
    }) 
    .catch(function(res) { 
     ... 
    }); 
    } 

});