https://github.com/phizaz/angular-directive-wrapper
A wrapper code for Angular's Directive for a better and more understandable directive
https://github.com/phizaz/angular-directive-wrapper
Last synced: 2 months ago
JSON representation
A wrapper code for Angular's Directive for a better and more understandable directive
- Host: GitHub
- URL: https://github.com/phizaz/angular-directive-wrapper
- Owner: phizaz
- Created: 2015-12-02T17:27:46.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2015-12-06T07:15:38.000Z (over 9 years ago)
- Last Synced: 2025-02-03T17:04:31.490Z (4 months ago)
- Language: JavaScript
- Size: 6.84 KB
- Stars: 0
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# angular-directive-wrapper
A wrapper code for Angular's Directive for a better and more understandable directive
Just include directive.js into your codebase and use it!
# Usage Example
```
import angular from 'angular';
//importing directive.js
import Directive from './directive';
angular
.module('TestDirectiveModule', [])
.directive('Test',
() => {
return Directive.new({
controllerAs: 'my',
template: '',
// this replaces the normal 'scope'
// I personally think 'interfaces' is a better word
interfaces: {
// public is a special interface that let outsider to peek inside into props and methods freely!
// like...
//
// $scope.abc.x => 0
public: '=name',
},
// all the properties are here!
props: {
x: 0,
y: 0,
// element and attrs (from link) are automatically included here as well
// be advised: link is invoked after the controller, then element and attrs
// will not be available at the starter() and watcher() time
},
// all the $watch code should all be put here!
// you shall write the watch destroyer here as well
watcher($scope) {
$scope.$watch('my.x', (x) => {
console.log('x has changed! to:', x);
});
},
// this block of code will be invoked first!
// starter -> watcher; link is invoked normally according to angular's directive
// if you like to use the scope, it is provided.
starter($scope) {
this.moveDiagonal();
},
// just the conventional link
link($scope, element, attrs) {
element.fadeIn(200);
},
// list all the methods
methods: {
moveDiagonal() {
this.x += 10;
this.y += 10;
}
}
});
});
```