Проверьте, директива имеет атрибут

Question

У меня есть следующий код

<my-directive></my-directive> 

, и я хочу, чтобы оценить следующий Тренари внутри него:

{{ $scope.my-option ? 'YES' : 'NO' }} 

так:

<my-directive my-option></my-directive> 

Как я могу сделать это? Он должен оценивать true, как только у меня есть атрибут, правильно? Я уже привязал атрибут знаком =.

Answer 1

Не следует указывать для $scope.my-option здесь, но для $scope.myOption.

Атрибуты CamelCased только в виде змеи в HTML-коде; на них следует ссылаться с помощью camelCase во всех остальных источниках JavaScript.

Итак, ваш HTML тег должен быть как:

<my-directive my-option></my-directive> 

Но ваше выражение AngularJS будет:

{{ $scope.myOption ? 'YES' : 'NO' }} 

$scope может даже не понадобиться, что бы уменьшить выражение

{{ myOption ? 'YES' : 'NO' }} 

---

Кроме того, если вы не хотите явно добавлять проверку в качестве наблюдателя в свой HTML, вы можете использовать функцию ссылки вашей директивы для этого. documentation объясняет это более подробно.

В вашей директиве, использовать его как в следующем фрагменте кода:

angular 
    .module('myModule') 
    .directive('myDirective', function() { 
     return { 
      restrict: 'A', 
      scope: { 
       myOption: '=?' 
      }, 
      link: function(scope, element) { 
       if (scope.myOption) { 
        // you have the attribute 
       } else { 
        // you don't 
       } 
      } 
     } 
    }); 

Answer 2

В случае, если вы не имеете изолированную сферу (а также работает с изолированной сферы), вы можете проверить AttrS непосредственно:

angular 
.module('myModule') 
.directive('myDirective', function($parse) { 
    return { 
     restrict: 'A', 
     link: function(scope, element, attrs) { 
      var option; 
      if (attrs.hasOwnProperty('myOption')) { 
       // if attr is plain string 
       option = attrs.myOption; 
       // or parse from a scope property 
       option = $parse(attrs.myOption)(scope); 
      } 
     } 
    } 
});