Как передать один параметр в директиве Угловой JS?

Question

Я узнаю, как написать настраиваемую директиву в Angular JS. Я сделал первые шаги:

.directive("myClass", function(){ 
    return function (scope, element, attributes){ 
      // HERE TO GET PARAMETER AND COMPARE 
    } 
}); 

<div my-class="value"></div> 

Я пытаюсь передать параметр value директиве my-class, после проверки этого в директиве с switch case и вернуть имя класса.

Как я могу получить это значение внутри?

Answer 1

Существует несколько способов передать параметры директиве. Refer Directive Guide.

Один из способов использования свойства scope в объекте определения директивы, чтобы значения были доступны в функции ссылок.

Другой способ использует атрибуты
В вашем случае вы можете использовать атрибуты для доступа к параметрам, которые указаны в директиве Попробуйте войти атрибуты и увидеть, что все имеющиеся.

Вы можете использовать $parse для получения значений параметров

.directive("myClass", function($parse){ 
    return function (scope, element, attributes){ 
      // HERE TO GET PARAMETER AND COMPARE 
      console.log(attributes); 
      console.log($parse(attributes.myClass)); 
    } 
}); 



<div my-class="value"></div> 

Answer 2

Возвращаемое значение неверно. Это должно выглядеть так:

var module = angular.module('someModule', []); 
module.directive("myClass", function(){ 
    return { 
     restrict: 'A', 
     // other scope options here... 
     link: function ($scope, $el, $attrs) { 
      // $attrs.myClass == 'value' 
     } 
    } 
}); 

Answer 3

Самый простой способ передать значения директивы изолирует область действия директивы

angular.module("app",[]) 
 
.directive("myClass", function(){ 
 
    return { 
 
      restrict : 'A', 
 
      scope : { 
 
      myValue : '@' 
 
      }, 
 
      link : function (scope, element, attributes){ 
 
       console.log(scope.myValue) 
 
      } 
 
     } 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script> 
 
<div ng-app="app" > 
 

 
    <div my-class my-value="value"></div> 
 
</div>