JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<div ng-controller="MyController">
    <grid-tools></grid-tools>
    <div ng-repeat="item in gridInMyController">
        <p>{{item}}</p>
    </div>
</div>

CSS

.grid-tools-style {
    background-color: #c68700;
}
.grid-tools-style:hover {
    cursor: pointer;
}

JavaScript

'use strict';

(function () {
    var ssheet = angular.module('ssheet', []);

    ssheet.factory('myService', [function () {
        //var myServiceFunction;

        return {
            myServiceFunction: function (grid) {
                //alert('myServiceFunction');
                //alert('grid given to myServiceFunction is ' + grid.toString());
                grid = ['now', 'the', 'grid', 'has', 'changed'];
                //alert('grid in myServiceFunction changed to ' + grid.toString());
                return grid;
            }
        }
    }]);

    ssheet.controller('MyController', ['$scope', function ($scope) {
        $scope.gridInMyController = ['foo', 'bar', 'dog', 'cat']; // this was a 2D array, but simplified it for testing
    }]);

    ssheet.controller('MyDirectivesController', ['myService', '$scope', function (myService, $scope) {
        $scope.changeGrid = function () {
            //alert('MyDirectivesController.changeGrid');
            //$scope.gridInDirective = ['now', 'the', 'grid', 'has', 'changed']; //this worked
            $scope.gridInDirective = myService.myServiceFunction($scope.gridInDirective); // this doesn't work
            console.log($scope.gridInDirective);
        }
    }]);

    ssheet.directive('gridTools', ['myService', function (myService) {
        return {

            restrict: 'E',
            replace: true,
            scope: {
                gridInDirective: '=gridInElement',
            },
            template: '<div class="grid-tools-style" grid-in-element="gridInMyController" ng-click="changeGrid()">Click this div to change the grid</div>',

            controller: 'MyDirectivesController',
        }
    }]);

})();