JSFiddle - React, Tailwind, and code Playground

by Minko Gechev

HTML

<div ng-app="app">
    <div ng-controller="MainCtr">
        <div>{{value}}</div>
        <div d1="" dial="callYou(msg)"></div>
    </div>
</div>

JavaScript

/**
 * Veery important!
 * The attribute dial must indicate that
 * it is associated with a method.
 * The name of the argument in callMe (HTML)
 * and the object literal in 
 * ng-click="dial..." must be the same!
 */

window.app = angular.module('app', [])
.directive('d1', function () {
    return {
        scope: {
            dial: '&'
        },
        template: '<input type="text" ng-model="value" /><button ng-click="dial({ msg: value })">Click!</button>'
    };
})
.controller('MainCtr', function ($scope) {
    $scope.callYou = function (val) {
        alert(val);
    };
    $scope.value = "Value";
});