2016-09-22 6 views
1

私はangularjsを学んでおり、サービスと工場で記事を読んでいます。このARTICLEに提供される1つの例は、Service Fiddleです。既存のサービスの角度で工場を作る方法

私はこのサービスを工場に変換しようとしていますが、これはMy Factory Fiddleへのリンクです。しかし、まだそれは期待どおりに働いていない私は間違ってやっているか分からない。

HTML

<div ng-app="app"> 
     <div ng-controller="CalculatorController"> 
      Enter a number: 
      <input type="number" ng-model="number" /> 
      <button ng-click="doSquare()">X<sup>2</sup></button> 
      <button ng-click="doCube()">X<sup>3</sup></button> 

      <div>Answer: {{answer}}</div> 
     </div> 
    </div> 

JS

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

    app.factory('MathService', function() { 
    var myFactory = {}; 
     myFactory.add = function(a, b) { return a + b }; 

     myFactory.subtract = function(a, b) { return a - b }; 

     myFactory.multiply = function(a, b) { return a * b }; 

     myFactory.divide = function(a, b) { return a/b }; 

     retutn myFactory; 
    }); 

    app.factory('CalculatorService', function(MathService){ 
     var calcFactory = {}; 
     calcFactory.square = function(a) { return MathService.multiply(a,a); }; 
     calcFactory.cube = function(a) { return MathService.myFactory.multiply(a, MathService.myFactory.multiply(a,a)); }; 

     return calcFactory; 

    }); 

    app.controller('CalculatorController', function($scope, CalculatorService) { 

     $scope.doSquare = function() { 
      $scope.answer = CalculatorService.calcFactory.square($scope.number); 
     } 

     $scope.doCube = function() { 
      $scope.answer = CalculatorService.calcFactory.cube($scope.number); 
     } 
    }); 

答えて

2

あなたはそれが 'アプリ' モジュールをインスタンス化することはできませんので、すべてが失敗したと文句を言ういじる何らかの理由で。

とにかく、ここでは動作例へのバイブルです:https://jsfiddle.net/gom2q6bz/1/

CalculatorService.calcFactory.cubeに電話する必要はなく、CalculatorService.cubeに電話する必要があります。

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

app.factory('MathService', function() { 
    var service = {}; 
    service.add = function(a, b) { 
    return a + b 
    }; 

    service.subtract = function(a, b) { 
    return a - b 
    }; 

    service.multiply = function(a, b) { 
    return a * b 
    }; 

    service.divide = function(a, b) { 
    return a/b 
    }; 

    return service; 
}); 

app.factory('CalculatorService', function(MathService) { 
    var service = {}; 
    service.square = function(a) { 
    return MathService.multiply(a, a); 
    }; 
    service.cube = function(a) { 
    return MathService.multiply(a, MathService.multiply(a, a)); 
    }; 

    return service; 

}); 

app.controller('CalculatorController', function($scope, CalculatorService) { 

    $scope.doSquare = function() { 
    $scope.answer = CalculatorService.square($scope.number); 
    } 

    $scope.doCube = function() { 
    $scope.answer = CalculatorService.cube($scope.number); 
    } 
}); 
関連する問題