将ES6类用作Angular 1.x指令
将ES6类用作Angular 1.x指令
提问于 2015-02-20 09:57:51
我正在做一个小项目来绕过ES6带来的好处，我试图将类注册为angular指令，但我遇到了这个错误"TypeError:无法将类作为函数调用“，但从示例中我发现他们只是编写类并将其注册为angular指令。这是我的指令。
class dateBlock {
constructor () {
this.template = '/app/dateblock/dateblock.html';
this.restrict = 'AE';
this.scope = {};
}
};
export default dateBlock以及我导入索引的位置，然后声明它。
import calendarController from './calendar/calendar.js'
import dateBlock from './dateblock/dateblock.js'
function setup($stateProvider) {
$stateProvider
.state('base', {
url: '',
controller: calendarController,
templateUrl: '/app/calendar/calendar.html'
});
};
setup.$inject = ['$stateProvider']
var app = angular.module('calApp',['ngAnimate','ui.router','hmTouchEvents', 'templates'])
.config(setup)
.controller('calendarController', calendarController)
.directive('dateBlock', dateBlock)如果我错过了关键的一步，我很乐意听到。另一个附带的问题是，是将所有应用程序组件导入索引并在索引中注册，还是导出应用程序并在组件中导入和注册？
回答 6
Stack Overflow用户
发布于 2015-11-15 08:10:39
在我看来，不需要使用像register.js这样的外部库，因为您可以用这种方式将指令创建为ES6类：
class MessagesDirective {
constructor() {
this.restrict = 'E'
this.templateUrl = 'messages.html'
this.scope = {}
}
controller($scope, $state, MessagesService) {
$scope.state = $state;
$scope.service = MessagesService;
}
link(scope, element, attrs) {
console.log('state', scope.state)
console.log('service', scope.service)
}
}
angular.module('messages').directive('messagesWidget', () => new MessagesDirective)使用指令控制器允许您注入依赖项，即使没有额外的声明(例如。MessagesDirective.$inject = ['$scope', '$state', 'MessagesService'])，因此如果需要，您可以通过作用域使用链接函数中的服务。
Stack Overflow用户
发布于 2016-10-17 02:14:51
我的解决方案是：
class myDirective {
constructor( $timeout, $http ) {
this.restrict = 'E';
this.scope = {};
this.$timeout = $timeout;
this.$http = $http;
}
link() {
console.log('link myDirective');
}
static create() {
return new myDirective(...arguments);
}
}
myDirective.create.$inject = ['$timeout', '$http'];
export { myDirective }在主应用程序文件中
app.directive('myDirective', myDirective.create)Stack Overflow用户
发布于 2017-01-23 18:18:25
class ToggleShortcut{
constructor($timeout, authService, $compile, $state){
var initDomEvents = function ($element, $scope) {
var shortcut_dropdown = $('#shortcut');
$compile(shortcut_dropdown)($scope);
$scope.goToShortCutItem = function(state, params){
var p = params || null;
if(state === 'app.contacts.view'){
var authProfile = authService.profile;
if(authProfile){
p = {
id:authProfile.user_metadata.contact_id
};
}
}
$state.go(state, p);
window.setTimeout(shortcut_buttons_hide, 300);
};
$element.on('click', function () {
if (shortcut_dropdown.is(":visible")) {
shortcut_buttons_hide();
} else {
shortcut_buttons_show();
}
});
// SHORTCUT buttons goes away if mouse is clicked outside of the area
$(document).mouseup(function (e) {
if (shortcut_dropdown && !shortcut_dropdown.is(e.target) && shortcut_dropdown.has(e.target).length === 0) {
shortcut_buttons_hide();
}
});
// SHORTCUT ANIMATE HIDE
function shortcut_buttons_hide() {
shortcut_dropdown.animate({
height: "hide"
}, 300, "easeOutCirc");
$('body').removeClass('shortcut-on');
}
// SHORTCUT ANIMATE SHOW
function shortcut_buttons_show() {
shortcut_dropdown.animate({
height: "show"
}, 200, "easeOutCirc");
$('body').addClass('shortcut-on');
}
};
var link = function($scope, $element){
$timeout(function(){
initDomEvents($element, $scope);
});
};
this.restrict = 'EA';
this.link = link;
}
}
toggleShortcut.$inject = ['$timeout', 'authService', '$compile', '$state'];
function toggleShortcut($timeout, authService, $compile, $state){
return new ToggleShortcut($timeout, authService, $compile, $state);
}
angular.module('app.layout').directive('toggleShortcut', toggleShortcut);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/28620479
复制相关文章
相似问题