Как я могу разобрать директиву атрибута, который имеет несколько значений?

Question

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

<div animals="cat dog horse"></div> 

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

Моя предложенная логика для директивы:

app.directive('animals ', function(userService) { 
    return { 
     restrict: 'A', 
     link: function (scope, element, attrs) { 
      // how to parse the attribute and get an array of animal strings? 
      var animalsArray = ... ? 

      if (userService.likesAllAnimals(animalsArray)) 
      { 
       // show element 
      } 
      else 
      { 
       // hide element 
      } 
     } 
    }; 
}); 

Но я потерял о том, как:

1. Разбираем атрибут animals и вывести animalsArray из него.
2. Показать и скрыть элемент.

Помощь?

Answer 1

Вы можете попробовать это:

app.directive('animals', function(userService) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var animals = attrs.animals.split(' '); 

     if (userService.likesAllAnimals(animals)) 
     element.css('display', 'block'); 
     else 
     element.css('display', 'none'); 
    } 
    }; 
}); 

Plunker here.

Вы можете сделать это, а также:

app.directive('animals', function(userService, $parse) { 
    return { 
    restrict: 'A', 
    link: function (scope, element, attrs) { 
     var animals = $parse(attrs.animals)(scope); 

     if (userService.likesAllAnimals(animals)) 
     element.css('display', 'block'); 
     else 
     element.css('display', 'none'); 
    } 
    }; 
}); 

И теперь вы можете передать фактический массив директивы:

<div animals="['cat','dog','horse']"> 

или

<div ng-init="list=['cat','dog','horse']" animals="list"> 

Другой Plunker here.