JSFiddle - React, Tailwind, and code Playground

by GruffBunny

HTML

<div ng-app='MyModule' ng-controller="MainController">
    <p>tags {{tags[0]}}</p>
    <tags-select tags="tags"></tags-select>
</div>

JavaScript

angular.module('MyModule', [])

.controller('MainController', function( $scope ) {
  $scope.tags = [
    'Lorem Ipsum',
    'Dolor Sit'
  ];
})

.directive('tagsSelect', function() {
  return {
    scope: {
      'tags': '='
    },
    restrict: 'E',
    template: '<tag ng-repeat="tag in tags" name="tag"></tag>',
    transclude: true
  };
})

.directive('tag', function() {
  return {
    scope: {
      'name': '='
    },
    restrict: 'E',
    template: '{{name}} <span class="remove-tag" ng-click="remove(tag)">X</span>',
    link: function( scope, element, atrrs ) {
      scope.remove = function( tag ) {
        // TODO: Remove tag from parent & scope...
      };
    }
  };
});