2017-02-22 24 views
-1

Я узнаю, как написать настраиваемую директиву в Angular JS. Я сделал первые шаги:Как передать один параметр в директиве Угловой 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 и вернуть имя класса.

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

+0

это ISN» t полное определение директивы. директивы обычно не возвращают функцию, они возвращают объект с областью, шаблоном, контроллером и т. д. – Claies

+0

Возможно, вы просто хотите [фильтр] (https://docs.angularjs.org/guide/filter). – isherwood

+0

Прочтите руководство (https://docs.angularjs.org/guide/directive) и задайте более конкретный вопрос, если у вас есть. –

ответ

2

Существует несколько способов передать параметры директиве. 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> 
1

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

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

Как я могу использовать директиву как ng-класс, чтобы он возвращал aatribute class = "red" – Darama

+0

Я думаю, что это должно быть 'ограничение: 'C'' – Darama

1

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

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>

+0

Можете ли вы прокомментировать этот образ по линии? – Darama

+0

@ Дарья жалко, я не понял –

+0

Можете ли вы объяснить каждую из строк? – Darama