Динамический идентификатор внутри шаблона AngularJS

Question

Я обертываю плагин jQuery внутри директивы AngularJS. То, как я хотел бы назвать директиву, например,:

<my-dialog data-trigger-id="myTriggerId">My dialog content...</my-dialog> 

Внутри моего шаблона директивы выглядит следующим образом:

<button id="{{triggerId}}">Button text...</button> 

Я придаю событие для плагина Jquery (где вы указываете триггер селектор) внутри функции ссылки моей директивы. Моя проблема заключается в том, что это работает, если я жёстко идентификатор кнопки внутри шаблона директивы, как это:

<button id="myTriggerId">Button text...</button> 

Сгенерированного HTML выглядит отлично в браузере, это означает, что делает элемент с динамическими работами ид. Это просто, что плагин jQuery не может найти этот элемент, если я использую динамический идентификатор, но он работает с жестко кодированной версией. Я также искал компиляцию AngularJS, потому что это похоже на то, что плагин jQuery хочет инициализировать элемент еще не существует.

Есть ли у меня пропадание? Благодаря!

Редактировать: мне, наконец, удалось упростить его и создать пример jsfiddle. Если вы запустите этот пример, вы увидите в консоли, что этот элемент не существует в то время, когда я его регистрирую, но если вы проверите DOM, вы увидите, что он есть и имеет правильный идентификатор. Однако, если вы жестко зададите идентификатор в шаблоне (id = test вместо id = {{elemId}}), в консольном журнале будет показано, что один элемент может быть найден. Надеюсь, это поможет найти решение.

http://jsfiddle.net/a1nxyv8u/7/

Answer 1

дайджеста еще не вынесено в DOM к тому времени, вы звоните вам $ («# тест»). Длина.

Вам нужно добавить в $ тайм-аут, так что гидролизат будет завершена, а затем вызвать ваш метод

var app = angular.module('app', []); 
app.directive('myDialog', ['$timeout', function ($timeout) { 
    return { 
     restrict: 'E', 
     template: '<button id="{{elemId}}" class="{{elemClass}}">Open dialog</button>', 
     link: function (scope, element, attrs) { 

      var selector = scope.elemSelector, 
      elemClass = (selector.indexOf('.') > -1) ? selector.substr(1) : '', 
      elemId = (selector.indexOf('#') > -1) ? selector.substr(1) : ''; 

      scope.elemClass = elemClass; 
      scope.elemId = elemId; 

      $timeout(function() { 
       console.log('elem: ', $('#test').length); 
      }); 
      // jQuery plugin init here but element doesn't seem to exist yet. 

     }, 
     scope: { 
      elemSelector: '@' 
     } 
    } 
}]); 

Хотя следует отметить, что вы должны попробовать и облегчить ИН на всех и просто использовать $ (элемент), если только ваш jQuery не нуждается в Id.