コントローラーから機能を分離してサービスを開始しようとしています。これにより、異なるコントローラー間で同じ機能を追加することなく、複数のコントローラーで使用できるようになります。
サービスで構成しようとする前の元のコントローラーは正常に機能しており、以下のように見えます (colorController.js):
colorController.js
(function() {
angular
.module('evolution')
.controller('ColorController', ColorController);
ColorController.$inject = ['$scope', '$http'];
function ColorController($scope, $http){
$scope.range = function(max, min, step){
step = step || 1;
var input = [];
for (var i = max; i >= min; i -= step) input.push(i);
return input;
};
};
})();
そして以下は、サービスと新しいコントローラーでそれを分離しようとするコードです
rangeService.service.js
(function() {
angular
.module('evolution')
.service('RangeService', RangeService);
function RangeService(){
this.range = function(max, min, step){
step = step || 1;
var input = [];
for (var i = max; i >= min; i -= step) input.push(i);
return input;
};
};
})();
rangeController.js
(function() {
angular
.module('evolution')
.controller('RangeController', RangeController);
RangeController.$inject = ['$scope', '$http', '$log', 'RangeService'];
function RangeController($scope, $http, $log, RangeService){
$scope.range = function() {
$scope.result = RangeService.range();
return $scope.result;
}
console.log($scope.range());
};
})();
上記の出力 console.log($scope.range); 空の配列です []
次のように、RangeService に何らかの引数を渡すと:
$scope.result = RangeService.range(100,96);
その後、ブラウザに正しい出力が表示されます。
以下のコードに示すように、これらの引数を colors.html 内で実行する必要があります。
<div class="color_column_row" ng-repeat="n in range(100,50, 5)">
以下はhtmlコードです。
ここで変更したのは、 ng-controller="ColorController" から ng-controller="RangeController" だけです
色.html
<div class="col-xs-12 col-sm-3" id="color_column_white_container" ng-app='evolution' ng-controller="RangeController">
<h1 class="evo-header-5 reverse">Light Translucent Colors</h1>
<div class="color_column_row" ng-repeat="n in range(100,50, 5)">
<div class="color_swatch_bar evo-light-{{ n }}-bg">
<span class="tag">evo-light-{{ n }}</span>
<span class="tag">{{ n }}%</span>
</div>
</div>
</div>