コントローラでファクトリを呼び出すことができません

ページネーションの番号を返すページングという名前のファクトリを作成しました。コントローラでファクトリを呼び出すことができません

expenseApp.factory('paging', function() { 
    this.pages = function(min, max, step) { 
    if (max <= 5) { 
     min = 1; 
    } 
    if (max > 5) { 
     min = max - 3; 
    } 
    step = step || 1; 
    var input = []; 
    for (var i = min; i <= max; i += step) 
     input.push(i); 
    return input; 
    };

私は

expenseApp.controller('expenseController', function($scope, $http, paging) { 
    $scope.range = function() { 
     $scope.answer = paging.range(0, 10, 1); 
    } 
    });

私のコントローラで、この工場を呼びたいが、このコードは動作しません。私はあなたの工場がどんな値を返すされていないことを意味し、エラー

Error: [$injector:undef] http://errors.angularjs.org/1.6.5/$injector/undef?p0=paging(…)

を取得しているので、これはそれをhere

var expenseApp = angular.module('expenseApp', []); 
 
expenseApp.factory('paging', function() { 
 
    this.pages = function(min, max, step) { 
 
    if (max <= 5) { 
 
     min = 1; 
 
    } 
 
    if (max > 5) { 
 
     min = max - 3; 
 
    } 
 
    step = step || 1; 
 
    var input = []; 
 
    for (var i = min; i <= max; i += step) 
 
     input.push(i); 
 
    return input; 
 
    }; 
 
    expenseApp.controller('expenseController', function($scope, $http, paging) { 
 
    $scope.pages = function() { 
 
     $scope.answer = paging.range(0, 10,1); 
 
    } 
 
    }); 
 
});

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 
    <link rel="stylesheet" href="style.css"> 
 
    <script src="MyApp.js"></script> 
 
    <script src="MyCtrl.js"></script> 
 

 
</head> 
 

 
<body> 
 
    <div ng-app="expenseApp" ng-controller="expenseController"> 
 
    <h1>Hello Plunker!</h1> 
 
    <ul class="pagination"> 
 
     <li ng-repeat="a in pages"> 
 
     <a ng-click="pagination(a)">{{a}}</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

出典

2017-08-31 xrcwrn

MyCtrl.js

<script src="MYApp.js"></script> <ul class="pagination"> <li ng-repeat="a in answer"> <a ng-click="pagination(a)">{{a}}</a> </li> </ul>

index.htmlを??? – anu

角度の縮小版を使用しないでください。読みやすいエラーメッセージが表示されます。コンソールでエラーメッセージを読んだら、MYApp.jsとMyApp.jsが異なるファイル名であることを確認してください。次に、次のエラーメッセージを読んで、工場の定義の中からコントローラを定義したことに気が付きます。つまり、コードをデバッグして修正してください。 –

@slacker pleseコードの更新を参照してください – xrcwrn

var expenseApp = angular.module('expenseApp', []); 
 
expenseApp.factory('paging', function() { 
 
    return { 
 
    pages: function(min, max, step) { 
 
     if (max <= 5) { 
 
     min = 1; 
 
     } 
 
     if (max > 5) { 
 
     min = max - 3; 
 
     } 
 
     step = step || 1; 
 
     var input = []; 
 
     for (var i = min; i <= max; i += step) 
 
     input.push(i); 
 
     return input; 
 
    } 
 
    } 
 
}); 
 

 
expenseApp.controller('expenseController', ['$scope', '$http', 'paging', function($scope, $http, paging) { 
 
    $scope.pages = function() { 
 
    $scope.answer = paging.pages(0, 10, 1); 
 
    } 
 
    $scope.pages(); 
 
}]);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.5/angular.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div ng-app="expenseApp" ng-controller="expenseController"> 
 
    <h1>Hello Plunker!</h1> 
 
    <ul class="pagination"> 
 
     <li ng-repeat="a in answer"> 
 
     <a ng-click="pagination(a)">{{a}}</a> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
</body> 
 

 
</html>

へのリンクです。

変更は、私が作っ：

paging.range

expenseApp.factory('paging', function() { 
    return { 
    pages: function(min, max, step) { 
     if (max <= 5) { 
     min = 1; 
    } 
    if (max > 5) { 
     min = max - 3; 
    } 
    step = step || 1; 
    var input = []; 
    for (var i = min; i <= max; i += step) 
     input.push(i); 
    return input; 
    } 
    } 
}); 

expenseApp.controller('expenseController', ['$scope','$http', 'paging', function($scope, $http, paging) { 
    $scope.pages = function() { 
    console.log(paging) 
    $scope.answer = paging.pages(0, 10,1); 
    } 
    $scope.pages(); 
}]);

出典

2017-08-31 10:47:34 anu

を試してみました。だから、これを解決するために、あなたの工場でこのコードを使用することができます

expenseApp.factory('paging', function() { 
    var paging = {}; 
    var range = function(min, max, step) { 
    if (max <= 5) { 
     min = 1; 
    } 
    if (max > 5) { 
     min = max - 3; 
    } 
    step = step || 1; 
    var input = []; 
    for (var i = min; i <= max; i += step) 
     input.push(i); 
    return input; 
    }; 
    paging.range = range; 
    return paging; 
});

var paging = {};がrangeのように、この工場が提供するすべての機能のでpaging.range = range;がrangeにファクトリメソッドrangeを追加します保持するJSONオブジェクトであることに注意してくださいpagingオブジェクトのキー。最後に、このオブジェクトがサービスから返されます。

今すぐ工場pagingを使用する場合は、JSONオブジェクトpagingを使用する場合と同じです。したがって、アクセスpaging.range(0, 10,1)はファクトリメソッドを呼び出します。あなたのplunkrもので、ここでは動作しません

は親切にこのスニペットを確認する作業PLUNKR

出典

2017-08-31 10:38:49

コードはリピートで指定されているとおりに10回印刷する必要があります – xrcwrn

コントローラでファクトリを呼び出すことができません

答えて

関連する問題