JSFiddle - React, Tailwind, and code Playground

by Emanuel Vecchio

HTML

<div ng-app="app" ng-controller="ctrl as vm">
    <input ng-model="vm.value" />
    <dir myattr="'abc'"></dir>
    <dir myattr="123"></dir>
    <dir myattr="vm.value"></dir>
</div>

JavaScript

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

mod.controller('ctrl', function () {
    var vm = this;
    vm.value = "initial value";
});

mod.directive('dir', function ($parse) {
    return {
        restrict: 'E',
        template: '<p>{{value}}</p>',
        scope: {},
        compile: function ($element, attr) {
            var fn = $parse(attr.myattr);
            return {
                pre: function link(scope, element) {
                    scope.value = fn(scope.$parent);
                    scope.$watch(fn.bind(this, scope.$parent),
                        function (newv, oldv) {
                            console.log(newv);
                            scope.value = newv;
                        }
                    );
                },
                post: function () {}
            }
        }
    };
});