addEventListener для простого примера директивы в AngularJS

Попытка получить this очень простой пример директивы для работы. Из какого-то исследования «elem» кажется объектом HTMLHeadingElement (который наследуется от Element). Не знаю, почему elem.addEventListener не работает. Кроме того, elem.bind, похоже, работает, но это не global bind, верно?addEventListener для простого примера директивы в AngularJS

Кроме того, было бы здорово, если бы кто-то мог коснуться спецификации объекта документа (DOM) уровня 2 HTML-спецификации и спецификации объекта документа (DOM) уровня 1. Произошло это впервые, это новая иерархия объектов для элементов DOM?

Ниже функция ссылка моей директивы: -

link: function(scope, elem, attrs) { 
    // elem will be HTMLHeadingElement object! 
    scope.name = 'New Micheal!'; 
    elem.addEventListener('click', function(e) { 
     elem.css('background-color', 'red'); 
    }) 
    /*elem.bind('mouseover', function(e) { 
     elem.css('background-color', 'red'); 
    }); 
    elem.bind('mouseout', function(e) { 
     elem.css('background-color', 'white'); 
    });*/ 
}

источник

2016-06-23 nev.m

elem - это обернутый jQuery (или jqlite) элемент. Это не экземпляр HTMLHeadingElement (хотя доступ к обернутому экземпляру может быть доступен).

Чтобы добавить обработчик кликов, вы должны использовать: elem.click(function(e) { ... }); вместо addEventListener.

EDIT

выше подход работает только если вы используете JQuery надлежащего (не jqlite). Однако, в общем, вы не должны добавлять обработчики через JS. Угловой способ - сделать это в шаблоне.

Что-то вроде этого:

scope.colorHandler = function() { 
    elem.css('background-color', 'red'); 
});

И в шаблоне:

template: '<div ng-click="name = \'colorHandler()\'"><h3>Hello {{name}}!!</h3></div>',

В этом примере, при нажатии на div будет вызывать обработчик цвета.

Это все еще не каноническое угловое, так как вы должны обращаться с изменениями css с изменениями в классах css и ng-class, но это приближается, и я надеюсь, что это иллюстрирует суть.

источник

2016-06-23 03:30:51

Не думаю, что есть ярлык 'нажмите()' если вы не используете jQuery ... если jQlite должен использовать 'bind ('click'' – charlietfl

Вы используете jqlite? В общем, youg h, вы должны делать вещи угловато и добавлять обработчиков в шаблоны. Я уточню свой ответ. –

Просто любопытно, когда я делаю предупреждение (elem), я вижу [[object HTMLDivElement]], что заставило меня поверить в его HTMLDivElement. Почему not alert (elem) дает мне некоторый намек на то, что его объект jqlite? –

elem не является элементом DOM это jQlite объект (angular.element) или объект JQuery, если JQuery включен в страницу перед угловатыми. JS

узел DOM является elem[0]

Можно использовать angular.element API, который является подмножеством методов JQuery.

Для мыши слушатель будет:

elem.bind('click',handlerfunc);

Это не глобальная привязка()

Нет ... это часть выше API и соответствует JQuery bind()

bind() (устаревший, используйте on()) - не поддерживает пространства имен, s избиратели или события.

источник

2016-06-23 03:29:39 charlietfl

У вас есть 2 jQlite и опции JavaScript:

яваскрипта:

elem[0].addEventListener('click', function(e) { 
    elem.css('background-color', 'red'); 
});

jQlite:

elem.bind('click', function(e) { 
    elem.css('background-color', 'red'); 
});

источник

2016-06-23 06:12:11

addEventListener для простого примера директивы в AngularJS

ответ

Смежные вопросы