AngularJS Drirective Template with variables(dynamic template) - angularjs-directive

Question

Not able to reflect values of the scope variables into
the template of a directive(dash-board-directive). Please help
On Template I have a button and would like to display button color as blue/black/yellow based on the value of scope.btnAttribData(which is holding values data-theme="a"/data-theme="b"/data-theme="e" etc)
/-----------
1)Markup:
Here is how I call my directive:
<div ng-controller="MyDashBoardCtrl">
<dash-board-directive list-item-value="listItemName" items="btnAttribData" ></navtree>
</div>
Where listItemName, and btnAttribData are the parent scope variables(plz refer DashBoardController item#4 ***)
/--------------------------------------
2) Controller on this div : ng-controller="MyDashBoardCtrl" as follows
app.controller('MyDashBoardCtrl', function ($scope)
{
$scope.itemselected = "None";
$scope.organizations={
"kind": "TestData",
"columns":["Row1","Row2","Row3"],
"rows":[
["Yes","No","No"],
["No","Yes","No"],
["No","No","Yes"]
]
};
this.setSelected = function (ID) {
//$scope.itemselected = ID;
$scope.itemselected = ID.btnValue;
}
})
/---------------------
3) code on directivce "dash-board-directive" as follows:
app.directive('dashBoardDirective', function ()
{
return {
template: '<btn-directive ng-repeat="item in items" item="item" itemselected="itemselected" ></navtree-node>',
restrict: 'E',
replace: true,
scope: {
items: '=items', //items holding btnAttribValue ie
//btnAttribValue: '=btnAttribData',
rowItemValue: '=listItemValue',
},
link: function (scope, elem, attrs)
{
}
};
});
app.directive('btnDirective', function ($compile)
{
var btnTemplate = '<button ng-model="tempTheme" >TEST!!!</button>'
return {
restrict: 'E',
require:"^ngController",
scope: {
item: "=",
itemselected: '='
},
compile:function(tElement,tAttrs, transclude)
{
console.log("###---In a linking function directive-btnDirective");
tElement.html(btnTemplate);
return function(scope, element, attrs)
scope.classEnable = scope.item.classEnable; //: "class='ui-disabled'"
scope.tempTheme = scope.item.tempTheme; //: "data-theme=a"
scope.uiBlockValue = scope.item.uiBlockValue; //: "class='ui-block-a'"
if ((angular.isDefined(scope.item)) && (scope.item.length > 0))
{
var btnElement = $compile('<btnDirective items="item"></navtree>')(scope);
elm.append(btnElement);
}
scope.itemSelect = function(id){
//alert(id);
myGreatParentControler.setSelected(id)
}
}
};
});
/---------------
***
4)
listItemName, and btnAttribData are the parent
scope variable from parent controller "DashBoardController" as follows(which stored into an scope.listItemName and scope.btnAttribData on a click event
var app = angular.module('AppDashBoard', [])
app.controller('DashBoardController', function($scope, $window)
{
$scope.listItemName;
$scope.listItemRowDataArray;
$scope.listItemRowDataAttributes={};
$scope.btnAttribData = new Array();
$scope.listItemData={
"kind": "TestData",
"columns":["Row1","Row2","Row3"],
"rows":[
["Yes","No","No"],
["No","Yes","No"],
["No","No","Yes"]
]
};
$scope.listItemClick = function(inputObj){
$scope.listItemName = inputObj;
console.log("### --- $scope.listItemName = "+inputObj )
var colData = $scope.listItemData.columns;
var rowData = $scope.listItemData.rows;
var iColDataIndex = colData.indexOf(inputObj);
var listItemRowData = new Array();
var arrayUiBlock = new Array();
arrayUiBlock[0] = "class='ui-block-a'";
arrayUiBlock[1] = "class='ui-block-b'";
arrayUiBlock[2] = "class='ui-block-c'";
uiBlockCtr=0;
for ( var j = 0; j < rowData[iColDataIndex].length; j++ )
{
var colName = inputObj
var colValue = rowData[iColDataIndex][j];
var tempTheme="";
var btnId = "btnId_"+colName;
var isTempThemeBlue=false;
var classEnable = ""
//$scope.listItemRowDataArray;
listItemRowData.push(colValue);
var buttonAtributes= new Array();
if(colValue=="Yes")
{ buttonAtributes['rowItemValue']=inputObj;
buttonAtributes['btnValue']=colValue;
buttonAtributes['tempTheme']='data-theme="a"';
buttonAtributes['isTempThemeBlue']=true;
buttonAtributes['classEnable']="class='ui-disabled'";
}
else
{
buttonAtributes['rowItemValue']=inputObj;
buttonAtributes['btnValue']=colValue;
buttonAtributes['tempTheme']='data-theme="e"';
buttonAtributes['isTempThemeBlue']=false;
buttonAtributes['classEnable']="class='ui-enable'";
}
if(uiBlockCtr<3)
{
buttonAtributes['uiBlockValue']=arrayUiBlock[uiBlockCtr]
}
else
{ uiBlockCtr=0;
buttonAtributes['uiBlockValue']=arrayUiBlock[uiBlockCtr]
}
uiBlockCtr++;
$scope.btnAttribData.push(buttonAtributes);
}
$scope.listItemRowDataArray=listItemRowData;
};
})
/-------------------
5) index.html as follows:
<!DOCTYPE html>
<html ng-app="AppDashBoard">
<head>
<title>Rating Directive Demo</title>
<link rel="stylesheet" href="rating.css"/>
<link rel="stylesheet" href="vendor/foundation/foundation.min.css"/>
</head>
<body ng-controller="DashBoardController">
<div data-role="page" id="mainPageId">
<div data-role="header" href="" data-role="button" data-theme="b" >
<h1>ListVIEW</h1>
</div>
<div data-role="content" id="mainPageIdContent" >
<div>
<ul data-role="listview" >
<li ng-repeat="item in listItemData.columns">
{{item}}
</li>
</ul>
</div>
</div>
</div>
<div data-role="page" id="listItemDetailPageId">
<div data-role="header" href="" data-role="button" data-theme="b" >
<h1>ListVIEWDetails</h1>
Back
</div>
<div ng-controller="MyDashBoardCtrl">
<dash-board-directive list-item-value="listItemName" items="btnAttribData" ></navtree>
</div>
</div>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script type="text/javascript" src="rating.js"></script>
</body>
</html>
/-------------------
6) rating.js as follows;
var app = angular.module('AppDashBoard', [])
app.controller('DashBoardController', function($scope, $window)
{
$scope.listItemName;
$scope.listItemRowDataArray;
$scope.listItemRowDataAttributes={};
$scope.btnAttribData = new Array();
$scope.listItemData={
"kind": "TestData",
"columns":["Row1","Row2","Row3"],
"rows":[
["Yes","No","No"],
["No","Yes","No"],
["No","No","Yes"]
]
};
$scope.listItemClick = function(inputObj){
$scope.listItemName = inputObj;
console.log("### --- $scope.listItemName = "+inputObj )
var colData = $scope.listItemData.columns;
var rowData = $scope.listItemData.rows;
var iColDataIndex = colData.indexOf(inputObj);
var listItemRowData = new Array();
var arrayUiBlock = new Array();
arrayUiBlock[0] = "class='ui-block-a'";
arrayUiBlock[1] = "class='ui-block-b'";
arrayUiBlock[2] = "class='ui-block-c'";
uiBlockCtr=0;
for ( var j = 0; j < rowData[iColDataIndex].length; j++ )
{
var colName = inputObj
//arrayColName.push(jsonObjColumn[index]);
var colValue = rowData[iColDataIndex][j];
var tempTheme="";
var btnId = "btnId_"+colName;
var isTempThemeBlue=false;
var classEnable = ""
//for a listItem(Row1), add buttons value to the array "listItemRowData",then, assign this array to
//$scope.listItemRowDataArray;
listItemRowData.push(colValue);
var buttonAtributes= new Array();
if(colValue=="Yes")
{ buttonAtributes['rowItemValue']=inputObj;
buttonAtributes['btnValue']=colValue;
buttonAtributes['tempTheme']='data-theme="a"';
buttonAtributes['isTempThemeBlue']=true;
buttonAtributes['classEnable']="class='ui-disabled'";
}
else
{
buttonAtributes['rowItemValue']=inputObj;
buttonAtributes['btnValue']=colValue;
buttonAtributes['tempTheme']='data-theme="e"';
buttonAtributes['isTempThemeBlue']=false;
buttonAtributes['classEnable']="class='ui-enable'";
}
if(uiBlockCtr<3)
{
buttonAtributes['uiBlockValue']=arrayUiBlock[uiBlockCtr]
}
else
{ uiBlockCtr=0;
buttonAtributes['uiBlockValue']=arrayUiBlock[uiBlockCtr]
}
uiBlockCtr++;
$scope.btnAttribData.push(buttonAtributes);
}
console.log("$scope.btnAttribData");
console.log($scope.btnAttribData)
$scope.listItemRowDataArray=listItemRowData;
console.log("$scope.listItemRowDataArray");
console.log($scope.listItemRowDataArray);
};
})
app.controller('MyDashBoardCtrl', function ($scope)
{
$scope.itemselected = "None";
$scope.organizations={
"kind": "TestData",
"columns":["Row1","Row2","Row3"],
"rows":[
["Yes","No","No"],
["No","Yes","No"],
["No","No","Yes"]
]
};
this.setSelected = function (ID) {
$scope.itemselected = ID.btnValue;
}
})
app.directive('dashBoardDirective', function ()
{
return {
template: '<btn-directive ng-repeat="item in items" item="item" itemselected="itemselected" ></navtree-node>',
restrict: 'E',
replace: true,
scope: {
items: '=items', //items holding btnAttribValue ie
//btnAttribValue: '=btnAttribData',
rowItemValue: '=listItemValue',
},
link: function (scope, elem, attrs)
{
}
};
});
app.directive('btnDirective', function ($compile)
{
var btnTemplate = '<button ng-model="tempTheme" >TEST!!!</button>'
return {
restrict: 'E',
require:"^ngController",
scope: {
item: "=",
itemselected: '='
},
//link: function (scope, elm, attrs, myGreatParentControler) {
compile:function(tElement,tAttrs, transclude)
{
console.log("###---In a linking function directive-btnDirective");
tElement.html(btnTemplate);
return function(scope, element, attrs)
scope.classEnable = scope.item.classEnable; //: "class='ui-disabled'"
scope.tempTheme = scope.item.tempTheme; //: "data-theme=a"
scope.uiBlockValue = scope.item.uiBlockValue; //: "class='ui-block-a'"
console.log("item =", scope.classEnable);
console.log("item =", scope.tempTheme);
console.log("item =", scope.uiBlockValue);
if ((angular.isDefined(scope.item)) && (scope.item.length > 0))
{
var btnElement = $compile('<btnDirective items="item"></navtree>')(scope);
elm.append(btnElement);
}
scope.itemSelect = function(id){
//alert(id);
myGreatParentControler.setSelected(id)
}
}
};
});