AngularJS Databinding Expression не работает внутри шаблона плагина подсказки

* EDIT: Майк указал на проблему с типом. настоящая проблема, которую я хочу решить, включает шаблон с cluetip. Смотрите этот пересмотренный plnkr: http://plnkr.co/edit/UGH3cV3z9MrqA4eyPjLc?p=preview AngularJS Databinding Expression не работает внутри шаблона плагина подсказки

Я уверен, что это связано с петлей переваривать и JQuery плагин cluetip, но я не знаю, какие шаги мне нужно сделать привязку данных работ внутри шаблона. Я привел простой пример в plnkr, чтобы показать, что я имею в виду.

http://plnkr.co/edit/YW7AsTEuJh2ixqSUJpld?p=preview

Код в вопросе заключается в следующем:

головы> Cluetip - AngularJS

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.26/angular.min.js"></script> 
    <link rel="stylesheet" href="jquery.cluetip.css" type="text/css" /> 
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script> 
    <script src="jquery.cluetip.js"></script> 

    <script type="application/javascript"> 
    $(function() { 
     $('a.title').cluetip({ 
     splitTitle: '|' 
     }); 
    }); 
    </script> 
</head> 

<body ng-app> 

    <input ng-model="somedata" placeholder="Some Data"> 
    <br/>{{ somedata }} 

    <hr/> 
    <br/> 
    <a class="title" href="#" title="This is the title| someData: {{ someData }} .|In this case, the delimiter is a pipe">In Line Text</a> 

</body>

источник

2014-10-28 Peter Kellner

Пара вопросов здесь происходит ...

Во-первых, вам не имеют контроллера, управляющего этим, поэтому область, созданная тегом, не видна для somedat ссылку в заголовке подсказки. Чтобы исправить это, необходимо ссылаться на контроллер:

<body ng-controller="MainCtrl">

и настройка somedata значение области в этом контроллере:

$scope.somedata = 'somedata';

Во-вторых, у вас есть небольшая опечатка в ссылке в заголовке (у вас есть капитал "D" в somedata):

title="This is the title| someData: {{ someData }} .|In this case, the delimiter is a pipe"

должен быть

title="This is the title| someData: {{ somedata }} .|In this case, the delimiter is a pipe"

И, наконец, похоже, что код cluetip jQuery создает копию значения, поэтому он не является динамическим. На самом деле, вероятно, он создает объекты DOM один раз при инициализации и никогда не ссылается на атрибут «title» еще раз - просто скрывает и показывает созданный контент. Следовательно, изменение значения атрибута «title», как представляется, игнорируется.

Я раздвоенный на Plnkr здесь с вышеупомянутыми изменениями (в том числе ссылки на файл script.js, где контроллер в настоящее время проживает): http://plnkr.co/edit/hzW6AtJBj4zPPM405n5Y?p=preview

Обратите внимание, что все работает; однако cluetip не изменяется динамически по мере изменения значения somedata. Я сделал дубликат якоря ниже первого в Plnkr, но изменил класс, поэтому cluetip не будет прикрепляться, и это стандартная подсказка. Вы увидите, что эта всплывающая подсказка обновляется динамически - с использованием того же поля ввода и somedata.

Помимо вышеизложенного, я думаю, вам нужно будет найти способ либо сгенерировать, либо обновить до инициализации cluetip или использовать другой виджет. В стороне от всего этого вам, вероятно, лучше будет исследовать собственную угловую директиву для этого, чтобы вы не столкнулись с этой проблемой. Может быть, что-то вроде http://angular-ui.github.io/bootstrap/#/tooltip

источник

2014-10-28 17:10:17 Mike

Thanks Mike. Опечатания меня всегда убивают. спасибо, что нашел. Oneway привязка данных на самом деле ОК, но моя реальная проблема (я слишком упрощен) заключается в том, что я использую шаблоны данных в cluetip. См. Этот plnkr: http://plnkr.co/edit/UGH3cV3z9MrqA4eyPjLc?p=preview Я посмотрел на угловое ui совсем немного, и это очень урезанная версия cluetip. Я использую множество предложений cluetip возможностей и без них не будет иметь большого значения.У меня нет навыков, чтобы добавить то, что мне нужно. –

Это совершенно другая проблема с оригинальным вопросом. в этом сценарии внешний файл никогда не просматривается Angular; он загружается непосредственно cluetip. В зависимости от вашей причины для экстернализации, вы можете исследовать альтернативы, такие как ng-include, чтобы содержимое содержалось во внешнем файле. Тем не менее, вам, вероятно, придется иметь все определение тега там (и по-прежнему использовать синтаксис title = ""). – Mike

спасибо, я отправлю новый вопрос. У меня есть большой сайт, на котором «детализация сеансов» наводится (подсказка), которую я переписываю из jquery в угловой. Я не видел никакого наведения на то, что работает с угловым, что работает так хорошо. http://www.siliconvalley-codecamp.com/Session/2014 –

AngularJS Databinding Expression не работает внутри шаблона плагина подсказки

ответ

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