javascript - 如何解析具有多个值的属性指令？

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在这里。

你也可以这样做：

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在这里。