JSFiddle - React, Tailwind, and code Playground

by Andrey K

HTML

<div ng-app="demoApp">
    <div ng-controller="sidebarController">
        <div sidebar>
            <div sidebar-item ng-repeat="item in items" item="item"></div>
        </div>
        
        <button ng-click="addItem();">Add Item</button>
    </div>
</div>

JavaScript

var demoApp = angular.module('demoApp', []);
        
demoApp.controller("sidebarController", ["$scope", function($scope) {
    $scope.items = [
    ];
    
    $scope.itemId = 1;
    $scope.addItem = function() {
        var inx = $scope.itemId++;
        $scope.items.push( { id: inx, title: "Item " + inx, subTitle: "Extra content " + inx } );
    };
    
    $scope.deleteItem = function(item) {
        console.log("Delete this!");
        console.log(item);
    };
}]);

demoApp.directive("sidebar", function() {
    return {
        restrict: "A",
        transclude: true,
        template: '<div><div ng-transclude></div></div>',
        controller: ["$scope", function($scope) {
            this.deleteItem = function(item) {
                $scope.deleteItem(item);
                $scope.$apply();
            };
        }]
    };
});

demoApp.directive("sidebarItem", function() {
    return {
        restrict: "A",
        scope: {
            item: "="
        },
        require: "^sidebar",
        template: '<div><span>{{ item.title }}</span><br /><span>{{ item.subTitle }}</span><br /><span ng-click="deleteItem(item)">X</span></div>',
        link : function (scope, element, attrs, sidebar) { 
          scope.deleteItem = function (item) { 
             sidebar.deleteItem(item);
          }
        }
    };
});