JSFiddle - React, Tailwind, and code Playground

by ryanbrill

HTML

<div ng-controller="DashboardCtrl">
    <div ng-repeat="widget in widgets| orderBy:'order'">
        <div type="{{widget.type}}">Test</div>
    </div>
</div>

JavaScript

var appRD = angular.module('appRD', []);

appRD.directive('dashboardWidgets', function() {
    return {
        restrict: 'E',
        compile: function(element, attrs)
        {
            var type = attrs.type || 'text';
            var htmlText = '<div class="'+attrs.type+'">'+attrs.type+'</div>';
            console.log("test");
            //element.appendTo(htmlText);
        }
    }
});

appRD.controller('DashboardCtrl', ['$scope', '$rootScope', '$http', function($scope, $rootScope, $http){
    $scope.foo = "value";
    $scope.widgets = [
        {
            id: 1,
            order: 1,
            type: "insights"
        },
        {
            id: 2,
            order: 3,
            type: "reports"
        },
        {
            id: 3,
            order: 2,
            type: "reports"
        },
        {
            id: 4,
            order: 0,
            type: "insights"
        }
    ];
}]);