JSFiddle - React, Tailwind, and code Playground

by Vincent Dagpin

HTML

<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<div ng-app="tempApp">
    <div ng-controller="tempCtrl">
        <div nx-test-directive style="background:red;" 
            ng-model="Name.First" />
        
        <button ng-click="Go($event)">Ha</button>
    </div>    
</div>

JavaScript

var app = angular.module("tempApp", []);

app.directive("nxTestDirective", function($compile){
    return {
        restrict: 'A',
        scope: {
            ngModel: '='   
        },
        link: function(scope, element, attrs, controller)
        {
               var t = $('<input />')
                   .css('background', 'yellow')
                   .attr('ng-model', 'ngModel');
            
            $compile(t)(scope);
                        $(element).replaceWith(t);
        }
    }
});

app.controller('tempCtrl', ['$scope', function($scope){
    $scope.Name = {
        First: 'Teng'   
    }; 
    
    $scope.Go = function(e){
         e.preventDefault();   
        
        console.log($scope.Name);
    }
}]);