Directive variable overwritting - angularjs

Question

I am working on angularjs directive, i made one JsBin, here I am using two arrays and each array selection is storing in two different variables name temp1 and temp2, the problem is when i select one array the other value changes to empty array and vice-versa.
HTML is this
<div ng-controller="ctrl">
<script type="text/ng-template" id="partials/checkbox.html">
<div ng-repeat="obj in data">
<input on-check type="checkbox" ng-model="checked" value="{{obj}}" click-checkbox="checkstatus(checked,obj)" checked-me="checked" />{{obj}}</div>
</script>
<check-boxes get-type="data"></check-boxes>
<check-boxes get-type="bestnights"></check-boxes>
</div></div>
Javascript code is
var app = angular.module('myApp', []);
app.controller('ctrl', function($scope) {
var data = [];
var bestnights = [];
var daysArray = [];
var getType;
var temp1, temp2;
$scope.$on($scope.getType, function() {
getType = $scope.getType;
if (getType == 'data') {
$scope.data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
temp1 = data;
daysArray = data;
}
if (getType == 'bestnights') {
$scope.data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
temp2 = bestnights;
daysArray = bestnights;
}
});
$scope.checkstatus = function(checked, obj) {
var index = daysArray.indexOf(obj);
if (checked) {
if (index === -1) {
daysArray.push(obj);
}
}
if (!checked) {
daysArray.splice(index, 1);
}
var str = daysArray.toString();
console.log(temp1);
console.log(temp2);
};
});
app.directive('checkBoxes', function() {
return {
restrict: "EA",
scope: {
getType: "#"
},
controller: "ctrl",
templateUrl: "partials/checkbox.html",
link: function(scope, ele, attrs, dctrl) {
ele.bind('click', function() {
//console.log(scope.getType);
scope.$emit(scope.getType);
});
var defaultFunction = function() {
scope.$emit(scope.getType);
}();
}
};
});
app.directive('onCheck', function() {
return {
restrict: "A",
scope: {
clickCheckbox: "&",
value: "#",
checkedMe: "="
},
link: function(scope, ele, attrs) {
ele.bind('click', function() {
scope.clickCheckbox(scope.checkedMe, scope.value);
});
}
};
});

Answer 1

I think the reason why one of your variable is always null is because of scopes: A directive has its own scope.
Which means: Checkbox data has temp1 and temp2 as variables.
Checkbox bestnights has temp1 and temp2 as variables too.
HOWEVER there are not the same : data.temp1 != bestnights.temp1.
To find what are the values of your directives, do the following. In the html:
<div ng-controller="test">
<script type="text/ng-template" id="partials/checkbox.html">
<div ng-repeat="obj in data">
<input on-check type="checkbox" ng-model="checked" value="{{obj}}"
click-checkbox="checkstatus(checked,obj)" checked-me="checked" />{{obj}}
</div>
</script>
<check-boxes get-type="data" values="days"></check-boxes>
<check-boxes get-type="bestnights" values="months"></check-boxes>
<input type="button" ng-click="showValues()" value="Show values" />
</div>
In the js:
var app = angular.module('myApp', []);
app.controller('test', function($scope){
$scope.days = [];
$scope.months = [];
$scope.showValues = function(){
console.log('Values:');
console.log($scope.days);
console.log($scope.months);
};
});
app.controller('ctrl', function($scope) {
$scope.$on($scope.getType, function() {
if ($scope.getType == 'data') {
$scope.data = ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'];
}
if ($scope.getType == 'bestnights') {
$scope.data = ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul'];
}
});
$scope.checkstatus = function(checked, obj) {
var index = $scope.values.indexOf(obj);
if (checked) {
if (index === -1) {
$scope.values.push(obj);
}
}
if (!checked) {
$scope.values.splice(index, 1);
}
};
});
app.directive('checkBoxes', function() {
return {
restrict: "EA",
scope: {
getType: "#",
values: "="
},
controller: "ctrl",
templateUrl: "partials/checkbox.html",
link: function(scope, ele, attrs, dctrl) {
ele.bind('click', function() {
scope.$emit(scope.getType);
});
var defaultFunction = function() {
scope.$emit(scope.getType);
}();
}
};
});
app.directive('onCheck', function() {
return {
restrict: "A",
scope: {
clickCheckbox: "&",
value: "#",
checkedMe: "="
},
link: function(scope, ele, attrs) {
ele.bind('click', function() {
scope.clickCheckbox(scope.checkedMe, scope.value);
});
}
};
});
I think it's best to separate the controller from your page and the controller from your directive. In my example, I created a controller named "test" for the page. I also added a new param to your directive which will contains the values.
Finally, for the example, I added a button to print the values.