Açısal fabrika servisiyle ilgili sorun

Question

Başım ağrıyor Açısal hizmetler. Ben basit bir örnek oluşturdu ama konsol bir hata tükürür hizmetlerinden yararlanmaya çalışırken

myApp.factory('Addition', function() { 
    return { 
    plusOne: function() { 
     $scope.number += 1; 
    } 
    }; 
}) 

UserController

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

service.js app.js (aşağıya bakınız) ettik js

myApp.controller('UserCtrl', [ '$scope', 'Addition', function($scope, Addition) { 

    $scope.number = 0; 

    $scope.plusOne = Addition.plusOne(); 

}]); 

view.html

Ben $scope.plusOne = Addition.plusOne(); ekleyip konsol muhtemelen burada oldukça temel bir şey eksik

ReferenceError: $scope is not defined at Object.plusOne

tükürür ama herhangi bir yardım gerçekten takdir ediyorum kadar

<div ng-controller="UserCtrl"> 
    {{number}} 

    <button ng-click=plusOne()></button> 

</div> 

görünümü düzgün $scope.number görüntüler.

Answer 1

Serviste $scope bağımlılığı enjekte edemezsiniz, service/factory, açısal modülün bileşeni arasında veri paylaşmak için orada bulunan tekil nesnedir.

Uygulamayı aşağıdaki gibi değiştirin, sizin için çalışacaktır.

Biçimlendirme

<div ng-controller="UserCtrl"> 
    {{getPlusOneValue()}} 
    <button ng-click=plusOne()></button> 
</div> 

Kod

myApp.controller('UserCtrl', [ '$scope', 'Addition', 
    function($scope, Addition) { 
     $scope.plusOne = Addition.plusOne; 
     $scope.getPlusOneValue = Addition.getPlusOneValue; 
    } 
]); 

Answer 2

Daha iyi böyle yapmak

myApp.factory('Addition', function() { 
    var number = 0; 
    return { 
    plusOne: function() { 
     number += 1; 
    }, 
    //plus one getter 
    getPlusOneValue: function(){ 
     return number; 
    } 
    }; 
}) 

Kontrolör. Çünkü "{{getPlusOneValue()}}" işlevi, ihtiyaç duymadığımız tüm açısal sindirim döngüsünde işlenecektir.

Biçimlendirme

<div ng-controller="UserCtrl" ng-bind="number"> 
    <button ng-click=plusOne()></button> 
</div> 

Fabrika

myApp.factory('Addition', function() { 
    var number = 0; 
    return { 
    //plus one getter 
    getPlusOneValue: function(){ 
     return ++number; 
    } 
    }; 
}) 

Kontrolör

myApp.controller('UserCtrl', [ '$scope', 'Addition', 
    function($scope, Addition) { 
     $scope.number = ''; 
     $scope.plusOne = function() { 
     $scope.number = Addition.getPlusOneValue(); 
     } 
    } 
]);