JSFiddle - React, Tailwind, and code Playground

by pythondave

HTML

<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.2/angular.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<div ng-app="miniapp" ng-controller="myController">
    <my-component
        button-my-component-id="myComponentId"
        button-name = "my own button name">
            <button class="btn btn-primary btn-mini ">Save </button>
            <button class="btn btn-mini">Close</button>
    </my-component>
</div>

JavaScript

'use strict';
var app = angular.module('miniapp', []);
app.controller('myController', function($scope) {
    $scope.myComponentId = "id1";
});

app.directive('myComponent', function() {
    return {
        restrict: 'E',
        scope: { buttonMyComponentId: '=' },
        template: '<div id="container" >    ' +  
                    '<div id="button-link" > ' + 
                        '<a  id="{{buttonMyComponentId}}-button-id" ' + 
                        'title="{{buttonMyComponentId}}-button-id" ' + 
                        ' href="#test" ' + 
                        ' role="button" >my Link Name Before Renaming</a> ' +                    '</div> ' + 
                '</div>',
        replace: true,
        link: function(scope, iElement, iAttrs) {
            $('#' + iAttrs.buttonModalWindowId + '-button-id').text(iAttrs.buttonName);
        },
        transclude: true
    }
});