adrian/learn
1
0
Fork 0
Code Issues Pull requests Releases Wiki Activity

Add EditorDirective

Browse source
This commit is contained in:
Adrian 2017-07-15 00:07:05 +02:00
parent 8cf68759f9
commit cf3a59ed49
4 changed files with 99 additions and 3 deletions

40
angular/assets/js/EditorDirective.js vendored Normal file
View file

@ -0,0 +1,40 @@
angular.module('MyApp')
.directive('edit', function ($parse) {
var directive = {}
directive.scope = true
directive.link = function (scope, element, attrs) {
scope.editor = {}
scope.item = {}
var callback = function (item) {}
var model = $parse(attrs.edit)
var editor = scope.editor
if (attrs.callback != null)
callback = $parse(attrs.callback)(scope)
editor.save = function () {
var data = model(scope)
callback(scope.item)
data[editor.key] = scope.item
editor.key = null
}
editor.revert = function () {
editor.key = null
}
scope.$watch('editor.key', function (value) {
if (value == null) {
scope.item = {}
} else {
var data = model(scope)
scope.item = angular.copy(data[value] || {})
}
})
}
return directive
})

21
angular/assets/js/MyApp.js vendored Normal file
View file

@ -0,0 +1,21 @@
angular.module('MyApp', [])
.controller('Demo', function ($scope) {
$scope.string1 = "Hello"
$scope.string2 = "World"
$scope.demodata = [
{ Name: "Answer", Number: 42 },
{ Name: "Trek", Number: 47 },
{ Name: "Eight", Number: 8 },
]
$scope.remove = function (editor, array, index) {
array.splice(index, 1)
editor.key = null
}
$scope.log = function (x) {
console.log(x)
}
})

2
angular/assets/js/SubScopeDirective.js vendored
View file

@ -1,4 +1,4 @@
angular.module('MyApp', [])
angular.module('MyApp')
.directive('subScope', ['subScopeUtils', function (util) {
var directive = util.directive()

39
angular/index.html
View file

@ -1,9 +1,15 @@
<!DOCTYPE html>
<html>
<body>
<head>
<title>Angular Tests</title>
</head>
<div ng-app="MyApp" ng-init="string1 = 'Hello'; string2 = 'World'; ok = 'ok'">
<body ng-app="MyApp" ng-controller="Demo">
<h1>Scoping</h1>
<div>
<div style="background:#eee">
<input ng-model="string1"><br>
<input ng-model="string2">
@ -16,8 +22,37 @@
<div sub-scope="string2"></div>
</div>
<h1>Editor</h1>
<div>
<button ng-click="log(demodata)">Print</button>
<table edit="demodata" callback="log">
<thead>
<th><button ng-click="editor.key = demodata.length">➕ New</button></th>
</thead>
<tbody>
<tr ng-repeat-start="row in demodata">
<td><button ng-click="editor.key = $index">✏</button></td>
<td><button ng-click="remove(editor, demodata, $index)">🚫</button></td>
<td colspan="2">{{ row.Name }}</td>
</tr>
<tr ng-repeat-end ng-if="editor.key === $index || $last && editor.key === $index + 1">
<td><button ng-click="editor.save()">✔️</button></td>
<td><button ng-click="editor.revert()">❌</button></td>
<td><input ng-model="item.Name"></td>
<td><input ng-model="item.Number"></td>
</tr>
</tbody>
</table>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
<script src="assets/js/MyApp.js"></script>
<script src="assets/js/SubScopeDirective.js"></script>
<script src="assets/js/EditorDirective.js"></script>
</body>
</html>