Here is a directive that I am working on:
var tonicswitch = angular.module('tonicswitch', []).directive('multiSelectTonics', function(){
return {
restrict: 'E',
scope: {
items: '=',
default: '=',
leftTitle: '@',
rightTitle: '@'
},
templateUrl: "views/tonicswitch.html",
link: function(scope) {
scope.switchItem = function(item) {
var index = scope.default.indexOf(item);
if(index == -1) {
console.log("Add tonic");
scope.default.push(item);
} else {
console.log("Remove tonic");
scope.default.splice(index, 1);
}
}
}
};
})
tonicswitch.directive('switchtonic', function() {
return {
restrict: 'E',
scope: {
value: '='
},
template: '<div>{{value}}</div>'
};
});
and here is the corresponding HTML code:
<style>
.switchBox .entBox {
overflow:auto;
height:500px;
width:350px;
border:1px solid black;
float:left;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
padding: 10px;
}
.switchBox .entBox div:hover {
background-color: #00FF03;
}
.switchBox .eBox2.entBox div:hover {
background-color: #FF0007;
}
switchtonic {
display: block;
margin-top: 5px;
}
switchtonic:first-child {
margin-top: 0;
}
</style>
<label>
<table>
<tr>
<th>{{leftTitle}}</th>
<th>{{rightTitle}}</th>
</tr>
<tr class="switchBox">
<td>
<div class="entBox eBox1">
<switchtonic ng-repeat="(key, value) in items" ng-if="default.indexOf(key) == -1" value="value.getName()" ng-click="switchItem(key)"></switchtonic>
</div>
</td>
<td>
<div class="entBox eBox2">
<switchtonic ng-repeat="(key, value) in items" ng-if="default.indexOf(key) > -1" value="value.getName()" ng-click="switchItem(key)"></switchtonic>
</div>
</td>
</tr>
</table>
</label>
In my app.js file, I have included the directives in my module like this:
angular
.module('Gins', [
'ngAnimate',
'ngAria',
'ngCookies',
'ngMessages',
'ngResource',
'ngRoute',
'ngSanitize',
'ngTouch',
'parse-angular',
'parse-angular.enhance',
'ngDialog',
'typeswitch',
'tonicswitch'
])
I am using the directive in my HTML as shown below:
<multi-select default="selectedTypesNL" items="listOfAllNLTypes" left-title="All Types" right-title="Picked Types"></multi-select>
These are the variables in my controller:
$scope.selectedTypesNL = [];
$scope.listOfAllNLTypes = {};
When I receive my items, I do the following:
for(var indexAllTypes = 0; indexAllTypes < $scope.types.length; indexAllTypes++){
$scope.listOfAllNLTypes[$scope.types[indexAllTypes].getType()] = $scope.types[indexAllTypes];
}
Everything works fine when I run grunt serve. However, when I run grunt build, the directive shows the table but does not repeat anything. The table remains empty. There seems to be an issue during the minification process. I do not see any errors, but disabling minifying solves the problem. Any ideas why this isn't working after minifying?