Невозможно получить доступ к атрибуту из директивы Angularjs

Я думаю, что я просто делаю что-то немое здесь, но я хочу получить доступ к настраиваемому атрибуту элемента HTML, к которому я приложил директиву, но он не работает. Я видел, как другие люди используют область действия. $ Eval, но я не могу заставить это работать.Невозможно получить доступ к атрибуту из директивы Angularjs

Вот что я пытался (jsfiddle здесь: https://jsfiddle.net/u5d3gfny/1/):

<!DOCTYPE html> 
<html ng-app="AngAttrTest"> 
    <head> 
     <title>Bootstrap 3</title> 
    </head> 
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/> 


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"> 
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.7/angular.min.js"></script> 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script> 

    <body>  

     <a href="#" id="my-modal" class="btn btn-success fcvt-btn-save" nextModalId="fileFormatModal" chain-modal>Continue</a> 
     <div id="appendMe"/> 

     <script> 

      var app = angular.module('AngAttrTest', []); 

      app.directive('chainModal', ['$document', function($document){ 

       return { 

        link: function(scope, elem, attrs) { 
         elem.bind('click', function() { 
          $('#appendMe').append("This works, ID: " + attrs.id + "<br/><br/>"); 
          $('#appendMe').append("So does this, Class: " + attrs.class + "<br/><br/>"); 
          $('#appendMe').append("But my custom Attribute nextModalId comes up undefined: " + attrs.nextModalId + "<br/><br/>"); 
         }); 
        } 

       } 
      }]);   

     </script> 

    </body> 
</html>

Я также попытался заменить мою функцию связи с этим, чтобы не Авиалью:

   link: function(scope, elem, attrs) { 
        elem.bind('click', function() { 
          var nextModalId = scope.$eval(attrs.nextModalId); 

         $('#appendMe').append("This works, ID: " + attrs.id + "<br/><br/>"); 
         $('#appendMe').append("So does this, Class: " + attrs.class + "<br/><br/>"); 
         $('#appendMe').append("But my custom Attribute nextModalId comes up undefined: " + nextModalId + "<br/><br/>"); 


        }); 
       }

Это кажется, что это должно быть очень просто но я не могу понять, какая глупая вещь, которую я делаю неправильно. Благодаря!

источник

2017-02-10 Jeremy Daniel Gregorio

Когда директива используется как атрибут, она должна быть объявлена в змейке. Чтобы исправить ...

Изменить nextModalId:

<a href="#" 
    id="my-modal" 
    class="btn btn-success fcvt-btn-save" 
    nextModalId="fileFormatModal" 
    chain-modal> 
    Continue 
</a>

Для next-modal-id:

<a href="#" 
    id="my-modal" 
    class="btn btn-success fcvt-btn-save" 
    next-modal-id="fileFormatModal" 
    chain-modal> 
    Continue 
</a>

Updated JSFiddle

источник

2017-02-10 23:26:07

Да, и еще раз спасибо. Я должен был знать, что это должен быть змеиный случай, поскольку все остальное - это :). –

Проблема заключается в elem.bind функции не директива. Я изменил код таким образом:

 var app = angular.module('AngAttrTest', []); 

     app.directive('chainModal', ['$document', function($document){ 

      return { 
       link: function(scope, elem, attrs) { 
        elem.bind('click', { id: attrs['id'], class: attrs['class'], nextModalId: attrs['nextModalId'] }, function(event) { 
         $('#appendMe').append("This works, ID: " + event.data.id + "<br/><br/>"); 
         $('#appendMe').append("So does this, Class: " + event.data.class + "<br/><br/>"); 
         $('#appendMe').append("But my custom Attribute nextModalId comes up undefined: " + event.data.nextModalId + "<br/><br/>"); 
        }); 
       } 
      } 
     }]);

источник

2017-02-11 00:23:43 Mhd

Невозможно получить доступ к атрибуту из директивы Angularjs

ответ

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