27.05.2013, 02:36
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
Тот же самый пример что и в посте 6, но написан он иначе.
во первых теперь есть модуль
вместо mainControler использована фабрика(factory)
А контроллеры объявляются в модуле
<!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', []);
//Используем фабрику
myApp.factory('Items',function(){
return [
{label:"Африка",val:25},
{label:"Европа",val:20}
]
})
//контролёр таблицы
myApp.controller('tableController',function($scope,Items){
$scope.items=Items;
//добавляет строку в таблицу
$scope.add=function(){
$scope.items.push({val:0});
};
// метод не позволяет выставить больше 100%
$scope.verife=function(item){
if (item.val>100) item.val=100;
if (item.val<0) item.val=0;
};
});
//контролёр графика
myApp.controller('chartController',function($scope,Items){
$scope.items=Items;
});
</script>
</head>
<body>
<div ng-controller="chartController">
<div style="height:310px;background-color:#000;padding:5px;">
<div class="bar" ng-repeat="item in items" style="height:{{item.val*3}}px; margin-top:{{300-item.val*3}}px;">
{{item.val}}%
</div>
</div>
</div>
<div ng-controller="tableController">
<table>
<tr ng-repeat="item in items">
<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>
</div>
</body>
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 27.05.2013 в 03:00.
|
|
27.05.2013, 05:03
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
dragable при помощи деректив
идея простая если к любому элементу добавить dragable, то его можно перемещать мышью
<!doctype html>
<html ng-app="myApp">
<head>
<style>
.noselect {
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
}
.block{
width:50px;
height:50px;
cursor:move;
}
</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', []);
//создадим дерективу
myApp.directive('dragable',function(){
return function(scope,element,attr){
//метод срабатывает при mouseMove
function move(e){
element[0].style.top=e.y+"px";
element[0].style.left=e.x+"px";
};
// срабатывает при отпускании мыши
function mouseUp(){
document.removeEventListener('mousemove',move);
document.removeEventListener('mouseUp',mouseUp);
}
//подпишимся на клик по элементу
element.bind('mousedown',function(){
//выставим позицию в absolute вдруг нестоит :)
element[0].style.position="absolute";
//подпишимся на перемещения мыши
document.addEventListener('mousemove',move);
//подпишимся на отпускание мыши
document.addEventListener('mouseup',mouseUp);
})
}
});
</script>
</head>
<body class="noselect">
<div dragable style="background-color:#999;" class="block">drag me</div>
<div dragable style="background-color:#99F;" class="block">drag me</div>
<div dragable style="background-color:#F99;" class="block">drag me</div>
<div dragable style="background-color:#9F9;" class="block">drag me</div>
<div style="background-color:#000;color:white; cursor:auto;" class="block">no drag</div>
</body>
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 27.05.2013 в 05:29.
|
|
27.05.2013, 07:17
|
|
Профессор
|
|
Регистрация: 04.10.2010
Сообщений: 571
|
|
Панель инструментов. Пример, как обернуть jQuery-плагин директивой AngularJS
<!doctype html>
<html ng-app="Toolbar">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.6/angular.min.js"></script>
<script src="http://paulkinzett.github.com/toolbar/js/jquery.toolbar.js"></script>
<script>
angular.module('Toolbar', [])
.directive('toolbarTip', function() {
return {
link: function(scope, element, attrs) {
// Функция link отдает в качестве параметра элемент, помеченный нашим атрибутом.
// Оборачиваем этот элемент jQuery, и получаем из attrs значение атрибута.
// Функция scope.$eval() вычисляет переданное ей выражение. В нашем случае
// просто превращает строку в массив с параметрами плагина
$(element).toolbar(scope.$eval(attrs.toolbarTip));
}
};
});
</script>
<link rel="stylesheet" type="text/css" href="http://paulkinzett.github.com/toolbar/css/toolbars.css">
<style>
#format-toolbar {
margin-left: auto;
margin-right: auto;
}
#format-toolbar-options { display: none; }
.settings-button {
width: 36px;
height: 28px;
border-radius: 5px;
border: 1px solid #161615;
box-shadow: inset 0px 1px 3px 0px rgba(0, 0, 0, .26), 0px 1px 0px 0px rgba(255, 255, 255, .15);
opacity: 0.3;
background-color: #343433;
z-index: 2;
display: block;
margin: 60px 44px;
}
.settings-button:hover, .pressed {
background-color: #343433;
opacity: 0.7;
cursor: pointer;
z-index: 2;
}
.settings-button img {
margin: 5px auto 0px auto;
display: block;
z-index: -1;
}
</style>
</head>
<body>
<!-- Место, куда нужно щелкать, чтобы показалась панель инструментов -->
<div id="format-toolbar" class="settings-button" toolbar-tip="{content: '#format-toolbar-options', position: 'top'}">
<img src="http://paulkinzett.github.com/toolbar/img/icon-cog-small.png">
</div>
<!-- Код панели инструментов -->
<div id="format-toolbar-options">
<a href="#"><i class="icon-align-left"></i></a>
<a href="#"><i class="icon-align-center"></i></a>
<a href="#"><i class="icon-align-right"></i></a>
</div>
</body>
</html>
|
|
27.05.2013, 15:19
|
 |
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
|
Сообщение от DjDiablo
|
|
идея простая если к любому элементу добавить dragable, то его можно перемещать мышью
|
видел этот пример в доках
|
Сообщение от DjDiablo
|
|
Это вроде как оптимизация
|
да, смотрится забавно 
Еще пример практически "из коробки". Позволяет делать элементы редактируемыми.
<!doctype html>
<html ng-app="directive">
<head>
<script src="http://code.angularjs.org/1.1.4/angular.min.js"></script>
<script>
angular.module('directive', []).directive('contenteditable', function() {
return {
require: 'ngModel',
link: function(scope, elm, attrs, ctrl) {
// вид -> модель
elm.bind('blur', function() {
scope.$apply(function() {
ctrl.$setViewValue(elm.html());
});
});
// модель -> вид
ctrl.$render = function(value) {
elm.html(value);
};
// загрузка начального значения из DOM
ctrl.$setViewValue(elm.html());
}
};
});
</script>
<style>
div[contentEditable] {
cursor: pointer;
background-color: #D0D0D0;
margin-bottom: 1em;
padding: 1em;
}
</style>
</head>
<body>
<div contentEditable="true" ng-model="content">Измените текст</div>
<pre>model = {{content}}</pre>
</body>
</html>
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
|
|
27.05.2013, 15:24
|
|
junior
|
|
Регистрация: 29.11.2011
Сообщений: 3,924
|
|
кстати, буквально рядом лежит тема на мой взгляд достаточно интересная Работа с таблицами на AngularJS
__________________
Чебурашка стал символом олимпийских игр. А чего достиг ты?
Тишина - самый громкий звук
|
|
28.05.2013, 00:28
|
|
Профессор
|
|
Регистрация: 04.10.2010
Сообщений: 571
|
|
Здесь целый выводок мелких примеров ( исходники)
P.S. Пример с редактируемым текстом интересный. Видел где-то. Как раз собирался разобраться как они это в диве делают.
Последний раз редактировалось Shitbox2, 28.05.2013 в 00:30.
|
|
28.05.2013, 02:04
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
Ещё одну демку набросал
можно менять стили div
щелчок по div работает аналогично reset
Демонстрирует как менять стили
демонстрирует использование контролёра в директиве
демонстрирует применение watch
а также тонкости взаимодействия control и link
в частности необходимость вызова $scope.$apply() если меняешь scope из link
Демонстрирует применение шаблонов
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
//Обьявим модуль
var myApp=angular.module('myApp', []);
//создадим дерективу
myApp.directive('demo',function(){
return {
//значит что это элемент, тоесть демо <demo>
restrict:"E",
//здесь можно установить связь атрбутов со свойствами scope
scope:{
},
//печалька метод find содержит всего одну строчку element.getElementsByTagName(selector), нету поиска по классу
link:function($scope,el,attrs,ctrl){
el.find('div')[0].addEventListener('click',function(){
//вызовем метод сброса
$scope.reset();
//затем чтобы данные из изменённого scope применились к html придётся вызвать метод $apply
$scope.$apply();
});
},
controller:function($scope){
//здесь храним стиль
$scope.divstyle={};
//Сьрасывает свойство на настройки по умолчанию
$scope.reset=function(){
$scope.width="100";
$scope.height="100";
$scope.border="1";
$scope.divstyle["background-color"]="#0f0";
}
$scope.reset();
// я отслеживаю изменения свойств при помощи $watch,
// так как к некотрым свойствам нужно дописывать px или что то ещё
//добавляем px к width
$scope.$watch('width', function() {
$scope.divstyle.width=$scope.width+"px";
});
//добавляем px к height
$scope.$watch('height', function() {
$scope.divstyle.height=$scope.height+"px";
});
//формируем border
$scope.$watch('border', function() {
$scope.divstyle.border="solid "+$scope.border+"px";
});
// Вместо нескольких $watch мы могли использовать и один
// $scope.$watch(function(){
// $scope.divstyle.border="solid "+$scope.border+"px";
// $scope.divstyle.height=$scope.height+"px";
// $scope.divstyle.width=$scope.width+"px";
// });
},
//шаблон котрый будет помещён в демо
template:
"<div ng-style='divstyle' class='demobox'></div>"+
"<div style='position:absolute;right:10px;top:0px;'>"+
"width:<input ng-model='width' type='range' max='800'/><br/>"+
"height:<input ng-model='height' type='range' max='800'/><br/>"+
"background-color:<input ng-model='divstyle["+'"background-color"'+"]' type='color'/><br/>"+
"border:<input ng-model='border' type='range' max='50'/><br/>"+
"<button ng-click='reset()'>reset</button>"+
"</div>"
}
});
</script>
</head>
<body >
<!-- вот так вот дериктива используется в приложении -->
<demo> </demo>
</body>
</html>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 28.05.2013 в 04:01.
|
|
28.05.2013, 02:38
|
|
Профессор
|
|
Регистрация: 04.10.2010
Сообщений: 571
|
|
Тоже с $watch играюсь. Хочу, чтобы он отслеживал изменение всего списка, но при этом показывал какой именно элемент изменился. Пока приходится делать отдельный $watch для каждого элемента, что не очень нравится.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script>
angular.module('myApp',[])
function TodoCtrl($scope) {
$scope.todos = [
{done: true, text: "foo"},
{done: false, text: "bar"}
];
}
function TodoItemCtrl($scope) {
$scope.$watch('todos[$index]',
function(newval, oldval, scope) {
alert(
"Изменен:" + $scope.todos[$scope.$index].text
);
}, true);
}
</script>
</head>
<body>
<div ng-controller="TodoCtrl">
<ul>
<li ng-repeat="todo in todos" ng-controller="TodoItemCtrl">
<input type="checkbox" ng-model="todo.done">
{{todo.text}}
</li>
</ul>
</div>
</body>
</html>
|
|
30.05.2013, 17:10
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
Это несовсем демка, это небольшой опыт показывающий изоляцию scope. Если кто то собирается писать на ангуляре это одна из базовых вещей которую вы обязаны понимать.
есть три директивы experement1, experement2, demo
experement1 и experement2 вложены в demo
у каждой директивы свой scope
experement 1 имеет полный доступ к scope demo
experement 2 имеет доступ только к одному параметру родительского scope и какой это именно будет параметр определяется через атрибут param1
эксперементы кликабельны
а главный scope можно сбросить.
<!doctype html>
<html ng-app="myApp">
<head>
<script src="http://code.angularjs.org/1.1.5/angular.min.js"></script>
<script language="javascript" type="text/javascript">
//Обьявим модуль
var myApp=angular.module('myApp', []);
//создадим дерективу
myApp.directive('test',function(){
return {
restrict:"E",
scope:{},
controller:function($scope){
$scope.reset=function(){
$scope.test1='root scope';
$scope.test2='root scope';
}
$scope.reset();
}
}
});
// первый эксперемент 1
// имеет полный доступ к родительскому scope (так как нет scope:{} )
myApp.directive('experement1',function(){
return {
restrict:"E",
controller:function($scope,$element){
$element.bind('click',function(){
$scope.test1="experement1";
$scope.test2="experement1";
$scope.$apply();
})
$scope.$watch ( function(){
//alert('test1='+$scope.test1 +' test2='+ $scope.test2);
});
}
}
});
// эксперемент 2
// имеет доступ только к однуму из свойств родительского scope, свойство будет доступен через param1
myApp.directive('experement2',function(){
return {
restrict:"E",
scope:{
//через param1 будет устанавливаться связь с родительским scope
param1:"="
},
controller:function($scope,$element){
$element.bind('click',function(){
$scope.param1="experement2";
$scope.test2="experement2";
$scope.$apply();
})
$scope.$watch ( function(){
//alert('param1='+$scope.param1 +' test2='+ $scope.test2);
});
}
}
});
</script>
</head>
<body >
<test>
<experement1 >
{{'test1="'+test1 +'" test2="'+ test2+'"'}}
</experement1>
<br/><br/>
<experement2 param1="test1" >
{{'param1="'+param1 +'" test2="'+ test2+'"'}}
</experement2>
<br/><br/>
<button ng-click="reset()">reset</button>
</test>
</body>
</html>
в двух словах что вы видите.
experement1 полность отображает то что содержится в родительском scope
при клике он поменяет содержимое родительский scope
изменение родительского scope повлияет только на param1 из experement2
experement2 отображает только один из параметров test1 родительского scope, при помощи param1
при клике он поменяет только test1
изначально test2 пуст так как он несвязан с родительским scope
если в test2 будет установлено значение то оно не как не будет связано с родительским scope, тоесть свойство будет принадлежать именно scope experement2
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 30.05.2013 в 17:32.
|
|
30.05.2013, 19:06
|
|
Профессор
|
|
Регистрация: 04.02.2011
Сообщений: 1,815
|
|
Опираясь на вышеприведённый материал
я переписал демку таблицы и графика
теперь таблица и графики это независимые, никак несвязанные компоненты, которые можно применять в любом приложении независимо друг от друга. Также можно применять вместе и соединять из в произвольном порядке.
компоненты будут связаны если у них будет общий 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>
__________________
Лучше калымить в гандурасе чем гандурасить на колыме
Последний раз редактировалось DjDiablo, 31.05.2013 в 08:23.
|
|
|
|
