2016-08-18 2 views
0

Я пытаюсь использовать директиву элемента (ограничивать: «E») для определения настраиваемого компонента. Вот мой page.html шаблон, который получает потянули в index.html через ng-view директивы:Пользовательский директивный тег, не вызывающий директивный код, в angularjs 1.2.29

<eng-popup>This text appears, but is rendered in a span</eng-popup> 

Угловое работает под управлением; index.html имеет ng-app="templatesApp" директиву в теге тела и app.js настраивает модуль, как показано ниже:

var app = angular.module("templatesApp", ['ngRoute']); 

Далее вдоль, в app.js У меня есть директива всплывающей определенная:

app.directive('engPopup', function() { 
    console.log("This console log does not trigger. I have tried 'eng-popup' as the directive's first parameter, but that doesn't work either."); 
    return { 
     restrict: 'E', 
     transclude: false, 
     template: '<div id="thisDoesNotEvenAppear"></div>' 
    }; 
}); 

проблема заключается в том, когда я смотрю на результирующей HTML компонента, это выглядит следующим образом:

<span class="ng-scope" jQuery110209261664696867675="7">This text should appear, surely</span> 
</eng-popup class="ng-scope" jQuery110209261664696867675="8"><//eng-popup> 

Поэтому у меня есть несколько вопросов:

Почему вызов анг-Всплывающее директива console.log НЕ получить запускаемые?

Почему содержимое в теге eng-popup находится в span?

И самое загадочное из всего, почему тег eng-popup начинается с тега END и заканчивается тегом с двумя слэшами?

Наконец, что я испортил, чтобы все это произошло?

EDIT
В соответствии с просьбой, вот Plunker. Похоже, проблемы пролетных и конечных тегов не происходит в этой упрощенной версии, но директива анг-всплывающее окно еще не срабатывает:
https://plnkr.co/edit/mVa6Mye5besJAtWihMWF?p=preview

RE-EDIT
Только в случае, если это все-таки решаем, вот последний Plunkr, с которым я смог собрать. Это не работает, что, по крайней мере, имеет общее с нашим реальным проектом. Не уверен, что это одна и та же проблема.
https://plnkr.co/edit/sJoYnYjqx9ZGIH0KhObC

+0

Пожалуйста, добавьте плункер с заданной угловой версией –

+0

Я удалил ngRoute в вашем файле plucker, так как u не определил зависимость. И добавил текст внутри шаблона, например.

ABC
. Он отлично работает, отображая «ABC». Консольный журнал направляется в консоль браузера. Проверьте, проверив хром. Pls уточняет точную проблему. – ajaykumar

+0

Кажется, что работает в Plunkr (см. Мой комментарий к ответу Тора ниже). К сожалению, я не могу подражать всем файлам, которые мы используем в нашем реальном проекте на Plunkr. Точная проблема заключается в том, что при запуске в нашем проекте директива 'engPopup' не запускается, и появляются вышеописанные странности (eng-popup content в тегах span и тегах eng-popup, отображаемых неправильно - start == end tag и end tag имеет дополнительную косую черту. См. итоговый html-код, выше) – moosefetcher

ответ

0

Я немного изменил ваш пример (очень мало), и, похоже, он работает нормально?

https://plnkr.co/edit/3NlHNDOCBVRktk3ZcsnV?p=preview

Что я сделал это, удалите ui-router требование, так как вы не добавили ссылку на скрипт. После этого он работает. Итак, вы включили в свой проект ui-router?

+0

Добавленный уровень сложности для моего реального проекта - это то, что мы настраиваем маршруты в app.config. Когда я вынимаю «ngRoute» из моего модуля приложения, ничего не работает. Вы упоминаете ui-router; Мы используем ngRoute. Это проблема? – moosefetcher

+0

Я думаю, вопрос в том, что: Как правильно включить ui-router в свой проект? – moosefetcher

+0

ОК, я думаю, я понимаю, что вы имеете в виду. В нашем проекте мы включаем ссылку на angular-route.min.js. Я добавил что-то, что коррелирует с этим в этом plunk ... https://plnkr.co/edit/sJoYnYjqx9ZGIH0KhObC?p=preview и, похоже, работает. Не уверен, в чем проблема с нашим реальным, более сложным проектом, и это то, что я пытаюсь исправить. Но спасибо за ваш ответ. – moosefetcher

0

Так что коллега указал, что он «работает» в Chrome. Оказывается, это проблема IE8. Кто бы мог подумать ... (Вся причина, по которой мы используем 1.2.29, состоит в том, что многие из наших пользователей будут получать доступ к ней через IE8, но похоже, что пользовательские директивы находятся вне таблицы).

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