角度工厂服务问题

Question

我正试图让我的头脑围绕Angular服务。 我创建了一个简单的示例，但是当我尝试使用该服务时，控制台会发出错误（参见下文）

app.js

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

service.js

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

UserController.js

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

  $scope.number = 0;

  $scope.plusOne = Addition.plusOne();

}]);

view.html

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

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

</div>

该视图正确显示$scope.number ，直到我添加$scope.plusOne = Addition.plusOne(); 并且控制台吐出来

ReferenceError：Object.plusOne中未定义$ scope

我可能在这里遗漏了一些相当基本的东西但是非常感谢任何帮助。

Answer 1

你不能在服务中注入$scope依赖， service/factory是单一对象，它们在角度模块的组件之间共享数据。

将实现更改为以下内容对您有用。

标记

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

码

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

调节器

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

Answer 2

最好这样做。 因为“{{getPlusOneValue（）}}”函数将在我们不需要的所有角度摘要周期中触发。

标记

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

厂

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

调节器

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