Опираясь на вышеприведённый материал
я переписал демку таблицы и графика
теперь таблица и графики это независимые, никак несвязанные компоненты, которые можно применять в любом приложении независимо друг от друга. Также можно применять вместе и соединять из в произвольном порядке.
компоненты будут связаны если у них будет общий datasource
<!doctype html>
<html ng-app="myApp">
<head>
<style>
.bar{
width:50px;
background-color:#0F0;
margin-right:5px;
float:left;
}
</style>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
//====================================================================================//
//==================================== ПРИЛОЖЕНИЕ ====================================//
//====================================================================================//
//Обьявим модуль
var myApp=angular.module('myApp', ['qChart','qTable']);
//данные
myApp.factory('Items',function(){
return [
{label:"Африка",val:25},
{label:"Европа",val:20}
]
})
//контролер приложения
myApp.controller('appCtrl',function($scope,Items){
$scope.items=Items;
});
//====================================================================================//
//=================================== мОДУЛЬ TABLE===================================//
//====================================================================================//
var qTable=angular.module('qTable', []);
qTable.directive('qtable',function(){
return {
restrict:"E",
scope:{
datasource:"="
},
controller:function($scope){
//добавляет строку в таблицу
$scope.add=function(){
$scope.datasource.push({val:0});
};
// метод не позволяет выставить больше 100%
$scope.verife=function(item){
if (item.val>100) item.val=100;
if (item.val<0) item.val=0;
};
},
template:
'<table>'
+'<tr ng-repeat="item in datasource">'
+'<td> '
+'<input ng-model="item.label"/></td> <td><input ng-model="item.val" ng-change="verife(item)"/>%'
+'</td>'
+'</tr> '
+'</table>'
+'<button ng-click="add()">Добавить запись </button>'
}
});
//====================================================================================//
//=================================== мОДУЛЬ CHART===================================//
//====================================================================================//
var qChart=angular.module('qChart', []);
qChart.directive('qchart',function(){
return {
restrict:"E",
scope:{
//через param1 будет устанавливаться связь с родительским scope
datasource:"="
},
template:
'<div style="height:310px;background-color:#000;padding:5px;">'+
'<div class="bar" ng-repeat="item in datasource" style="height:{{item.val*3}}px; margin-top:{{300-item.val*3}}px;">'+
'{{item.val}}%'+
'</div>'+
'</div>'
}
});
</script>
</head>
<body ng-controller="appCtrl">
<qchart datasource="items"> </qchart>
<qtable datasource="items"> </qtable>
</body>
</html>