JSFiddle - React, Tailwind, and code Playground

by phaas

HTML

<div ng-app="test" ng-controller="MyCtrl">
    
    {{ data }}
    <button ng-click="inspect()">Inspect</button>
    
    <span class="test-dir" ng-model="data">
        
    </span>

</div>

JavaScript

angular.module("test", []).controller("MyCtrl", function($scope) {
    $scope.data = {
        id: 123,
        name: "John"
    };
    $scope.inspect = function() {
        console.log($scope.data);
    };
}).directive("testDir", function() {
    return {
        restrict: 'C',
        template: '<h1>directive</h1><input type="text"></input><button>Click</button>',
        require: 'ngModel',
        link: function(scope, element, attr, model) {
            var input = element.find('input'),
                button = element.find('button');
            console.log(arguments);


            input.bind('change', function(e, v) {
                console.log(e, v);
            });

            button.bind('click', function() {
                input.val(model.$modelValue.id)
                var copy = model.$modelValue;
                copy.id++;
                model.$setViewValue(copy);
            });
        }
    }
});