JSFiddle - React, Tailwind, and code Playground

by Danish Farman

HTML

<div ng-app="MyApp">
    <div ng-controller="MyController">
        <editkeyvalue accept="blabla('from directive')" key='keyA' value='valueA' value2='valueB'/>
    </div>
</div>

JavaScript

var myApp = angular.module('MyApp',[])
myApp.directive('editkeyvalue', function($window) {
    return {
        restrict: 'E',
        replace: true,
        scope: {
            key: '=',
            value: '=',
            value2: '=',
            accept: "&"
        },
        template : '<div><label class="control-label">{{value}} - {{value2}} - {{key}}</label>' +
        '<label class="control-label">{{key}}</label>' +
          '<input type="text" ng-model="value" />'+
          '<input type="text" ng-model="value2" />'+
        '<button type="button" x-ng-click="cancel()">CANCEL</button>' +
        '<button type="submit" x-ng-click="save()">SAVE</button></div>',

      controller: function($scope, $element, $attrs, $location) {        
        $scope.save= function() {
          $window.alert('from directive', $scope.key, $scope.value, $scope.value2);    
          $scope.accept()
        };
      }
    }
});
      

myApp.controller('MyController', function($scope, $window) {
    $scope.keyA = 'AA';
    $scope.valueA= 'BB';
    $scope.blabla = function(msg) { 
        $window.alert('from controller', $scope.keyA, $scope.valueA);    
        $window.alert('hello ' + msg);
    };
});