Блог

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

 <div class="my-directive" data-rawdata="user-{{user_id}}">
    <div class="raw user-{{user_id}}" id="user-{{user_id}}" style='display:none'>
        I'M HERE.
    </div>
</div>
  

Это моя директива:

 .directive('myDirective', [function(Cart) {

  return {
    restrict: 'C',
    priority: -1000,
    link: function(scope, elem, attrs) {
        var element_id = attrs.rawdata

        if(element_id){

            var found1 = angular.element("#"   element_id); // not found
            var found2 = angular.element("."   element_id); // not found
            var found3 = angular.element(".raw"); // found

            console.log( [found1.length, found2.length, found3.length] );
            console.log( found3.attr('id') );       //  -> still not compile = user-{{user_id}} ?
            console.log( found3.attr('class') );    //  -> still not compile = user-{{user_id}} ?
        }

    }
  };
}])
  

И моя директива не может получить доступ к элементу по идентификатору, потому что это еще не законченное значение привязки id.

Есть ли способ разрешить выполнение моей директивы после завершения привязки? Я попробовал приоритет -1000, но безуспешно.

мой плунжер: http://plnkr.co/edit/2J7t6qK7F5MtyWI64Wpa?p=preview

Завершите свою директивную работу $timeout . Это позволяет запускать код ссылки после завершения рендеринга, например:

 $timeout(function(){
    if(element_id){
        var found1 = angular.element("#"   element_id)
        var found2 = angular.element("."   element_id)
        var found3 = angular.element(".raw")

        console.log( [found1.length, found2.length, found3.length] );
        console.log( found3.attr('id') );       //  -> still not compile = user-{{user_id}} ?
        console.log( found3.attr('class') );    //  -> still not compile = user-{{user_id}} ?

        if(found1.length)
            data = "Your data is "   found1.html()
        }

        angular.element(".result", elem).html( data || "Data not found" )
 }, 0);
  

Также не забудьте ввести $timeout в свою директиву.