Skip to content

Commit

Permalink
use controllerAs instead of $scope to explore the scope to view.
Browse files Browse the repository at this point in the history
  • Loading branch information
@daihuaye
daihuaye committed May 19, 2015
1 parent ce486a0 commit 6c54879
Show file tree
Hide file tree
Showing 2 changed files with 69 additions and 54 deletions.
101 changes: 58 additions & 43 deletions src/common/directives/diDesignPiece/diDesignPiece.js
View file
Expand Up @@ -152,50 +152,63 @@ function (
CustomPiece,
GameManager
){
var isSumbit = false,
var vm = this,
isSumbit = false,
currentColor = '';
$scope.pieces = [];
$scope.colors = randomColor({count: GameData.availableColors});

vm.pieces = [];
vm.colors = randomColor({count: GameData.availableColors});
if (GameData.getColor() === '') {
GameData.setColor(randomColor());
}
currentColor = GameData.getColor();

_.each(_.range(16), function (value) {
$scope.pieces[value] = {
vm.pieces[value] = {
isSelected: false
};
});
_.each(CustomPiece.getPattern(0), function (index) {
$scope.pieces[index].isSelected = true;
vm.pieces[index].isSelected = true;
});
$scope.errorCode = {
vm.errorCode = {
maxlength: false,
minlength: ($scope.pieces.length === 0),
minlength: (vm.pieces.length === 0),
saved: false
};

vm.onClick = onClick;
vm.isSelected = isSelected;
vm.isSaved = isSaved;
vm.getMaxPiece = getMaxPiece;
vm.interacted = interacted;
vm.pickColor = pickColor;
vm.getColor = getColor;
vm.getColorByIndex = getColorByIndex;
vm.getTop = getTop;

/////////////

function checkSelectedField() {
var res = _.countBy($scope.pieces, function (piece) {
var res = _.countBy(vm.pieces, function (piece) {
return piece.isSelected ? 'selected' : 'unselected';
});
if (res.selected > GameData.maxCustomPiece) {
$scope.errorCode.maxlength = true;
vm.errorCode.maxlength = true;
} else {
$scope.errorCode.maxlength = false;
vm.errorCode.maxlength = false;
}
if (res.selected > 0) {
$scope.errorCode.minlength = false;
vm.errorCode.minlength = false;
} else if (_.isUndefined(res.selected)) {
$scope.errorCode.minlength = true;
vm.errorCode.minlength = true;
}
$scope.errorCode.saved = false;
vm.errorCode.saved = false;
}

function isOk() {
// check any fields except saved field
return _.chain($scope.errorCode)
return _.chain(vm.errorCode)
.find(function (value, key) {
return key === 'saved' ? false : value;
})
Expand All @@ -206,59 +219,59 @@ function (
function savePiece() {
isSumbit = true;
if (isOk()) {
$scope.errorCode.saved = true;
CustomPiece.generatePatterns($scope.pieces);
vm.errorCode.saved = true;
CustomPiece.generatePatterns(vm.pieces);
}
}

$scope.onClick = function onClick(index) {
var isChecked = $scope.pieces[index].isSelected;
$scope.pieces[index].isSelected = !isChecked;
function onClick(index) {
var isChecked = vm.pieces[index].isSelected;
vm.pieces[index].isSelected = !isChecked;
checkSelectedField();
isSumbit = true;
savePiece();
};
}

$scope.isSelected = function isSelected(index) {
return $scope.pieces[index].isSelected;
};
function isSelected(index) {
return vm.pieces[index].isSelected;
}

$scope.isSaved = function isSaved() {
return isSumbit && !$scope.errorCode.saved;
};
function isSaved() {
return isSumbit && !vm.errorCode.saved;
}

$scope.getMaxPiece = function getMaxPiece() {
function getMaxPiece() {
return GameData.maxCustomPiece;
};
}

$scope.interacted = function interacted() {
function interacted() {
return isSumbit;
};
}

$scope.pickColor = function pickColor(color) {
$scope.errorCode.saved = false;
if ($scope.pieces.length > 0) {
function pickColor(color) {
vm.errorCode.saved = false;
if (vm.pieces.length > 0) {
isSumbit = true;
}
currentColor = color;
GameData.setColor(currentColor);
};
}

$scope.getColor = function getColor() {
function getColor() {
return { background: currentColor };
};
}

$scope.getColorByIndex = function getColorByIndex(index) {
if ($scope.pieces[index].isSelected) {
function getColorByIndex(index) {
if (vm.pieces[index].isSelected) {
return currentColor;
}
return;
};
}

$scope.getTop = function() {
function getTop() {
var customTop = GameManager.getOpenDesignBeforeStart() ? { top: '-76px' } : {};
return customTop;
};
}

}])
.directive('diDesignPiece', [
Expand All @@ -267,7 +280,9 @@ function(
var DesignPiece = {};

DesignPiece.controller = 'DesignPieceCtrl';


DesignPiece.controllerAs = 'dp';

DesignPiece.templateUrl = 'directives/diDesignPiece/diDesignPiece.tpl.html';

DesignPiece.restrict = 'A';
Expand Down
22 changes: 11 additions & 11 deletions src/common/directives/diDesignPiece/diDesignPiece.tpl.html
View file
Expand Up @@ -6,14 +6,14 @@
<li>1. Click on 4 by 4 sqare grid (green border one)</li>
<li>2. Click save button.</li>
</ul>
<div data-ng-messages="errorCode"
<div data-ng-messages="dp.errorCode"
class="dy-alert"
data-ng-style="getTop()"
data-ng-if="interacted()">
data-ng-style="dp.getTop()"
data-ng-if="dp.interacted()">
<div data-ng-message="maxlength"
class="alert alert-danger"
role="alert">
You selected over {{::getMaxPiece()}} cells.
You selected over {{::dp.getMaxPiece()}} cells.
</div>
<div data-ng-message="saved"
class="alert alert-success"
Expand All @@ -29,11 +29,11 @@
data-ng-repeat="i in [0, 90 , 180, 270]"
data-ng-class="'dy-' + i">
<ul class="dy-piece-ul">
<li data-ng-repeat="i in pieces track by $index"
<li data-ng-repeat="i in dp.pieces track by $index"
class="dy-piece-li"
data-ng-class="{'dy-checked': isSelected($index)}"
data-ng-style="{'background-color': getColorByIndex($index)}"
data-ng-click="onClick($index)"></li>
data-ng-class="{'dy-checked': dp.isSelected($index)}"
data-ng-style="{'background-color': dp.getColorByIndex($index)}"
data-ng-click="dp.onClick($index)"></li>
</ul>
<div data-ng-class="'dy-preview-' + i"
data-ng-if="i !== 0">Preview <i class="fa fa-repeat"></i> {{i}}&#176;</div>
Expand All @@ -45,15 +45,15 @@
<span>Your color:</span>
<ul>
<li class="dy-color dy-your-color"
data-ng-style="getColor()"></li>
data-ng-style="dp.getColor()"></li>
</ul>
</div>
<div class="col-sm-9">
<span>Pick a color:</span>
<ul>
<li data-ng-repeat="color in colors"
<li data-ng-repeat="color in dp.colors"
data-ng-style="{background: color}"
data-ng-click="pickColor(color)"
data-ng-click="dp.pickColor(color)"
class="dy-color"></li>
</ul>
</div>
Expand Down

0 comments on commit 6c54879

Please sign in to comment.