Przerabiam aplikacje w angularze 1.5 na ES6 (na 2 nie zdecydowaliśmy sie), problem pojawił się przy dyrektywach i podpinaniu ich w htmlu, prosze o rady, poniżej kod i błąd:
bundle.js:20493TypeError: this.$interval is not a function
at snapTest.link (http://localhost:8080/js/bundle.js:42678:13)
at http://localhost:8080/js/bundle.js:8117:19
at invokeLinkFn (http://localhost:8080/js/bundle.js:16608:10)
at nodeLinkFn (http://localhost:8080/js/bundle.js:16007:12)
at compositeLinkFn (http://localhost:8080/js/bundle.js:15310:14)
at publicLinkFn (http://localhost:8080/js/bundle.js:15190:31)
at Object.<anonymous> (http://localhost:8080/js/bundle.js:41701:19)
at http://localhost:8080/js/bundle.js:8117:19
at invokeLinkFn (http://localhost:8080/js/bundle.js:16608:10)
at nodeLinkFn (http://localhost:8080/js/bundle.js:16007:12) <svg style="width:400px;height:400px" snap-test="">
/components/index.js:
import uirouter from 'angular-ui-router';
import ngResource from 'angular-resource';
import routing from './home.routes.js';
import HomeController from './../../controllers/home.controller.js';
import snapTest from './../directives/snapTest.directive.js'
export default angular.module('app.home', [uirouter, ngResource])
.config(routing)
.directive('snapTest', () => new snapTest())
.controller('HomeController', HomeController)
.name;
snapTest.directive.js:
export default class snapTest {
constructor($interval) {
this.restrict = 'A';
this.$interval = $interval;
}
link(scope, element) {
this.$interval(() => this.paint(element), 100);
}
paint(element) {
var s = Snap(element[0]);
console.log(s);
var bigCircle = s.circle(150, 150, 100);
bigCircle.attr({
fill: "#bada55",
stroke: "#000",
strokeWidth: 5
});
var smallCircle = s.circle(100, 150, 70);
}
}
html:
<svg style="width:400px;height:400px" snap-test></svg>