JSFiddle - React, Tailwind, and code Playground

by Raul Corona Xolaltenco

HTML

<div ng-app="myApp">
<div ng-controller="myCtrl">
    <h1>From parent: </h1>
    <h3>parentProp1: <input ng-model="parentProp1"></h3>
    <h3>parentProp2: <input ng-model="parentProp2"></h3>
    <h3>parentObj: <input ng-model="parentObj.x"></h3>    
    <div my-directive interpolated="{{parentProp1}}" twoway-binding="parentProp2" oneway-object="{{parentObj}}">
        <h1>From child: </h1>
        <h3>interpolatedProp: {{ interpolatedProp }}</h3>
        <h3>twowayBindingProp: {{ twowayBindingProp }}</h3>
        <h3>someIsolateProp: {{someIsolateProp}}</h3>
        <h3>onewayObject: {{ onewayObject }} </h3>
        <h1>Set from child:</h1> 
        interpolatedProp： <input ng-model="interpolatedProp"> <br>
        twowayBindingProp： <input ng-model="twowayBindingProp"> <br>
        onewayObject： <input ng-model="onewayObject.x"> <br>
    </div>
</div>
</div>

JavaScript

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

app.controller("myCtrl", function($scope) {
    $scope.parentProp1 = 11;
    $scope.parentProp2 = 'Mark';
    $scope.parentObj = {'x': 1, 'y': 2};
}).directive("myDirective", function() {
    return {
        restrict: 'AE',
        scope: { 
            interpolatedProp: '@interpolated', 
            twowayBindingProp: '=twowayBinding',
            onewayObject: '@onewayObject',
        },
        link: function($scope, $elem, $attr) {
            $scope.someIsolateProp = "I'm isolated";
            console.log($scope.onewayObject);
            $attr.$observe('onewayObject', function(value) {
                console.log(value);
            });
        }
    }
});