JSFiddle - React, Tailwind, and code Playground

by Rajesh TV

HTML

<div ng-app='demo'>
  <div ng-controller="MyCtrl">
    <my-directive values='some.values' onsearchtextchange='onsearchtextchange' searchtext='searchtext'></my-directive>
  </div>
</div>

JavaScript

var demo = angular.module('demo', []);
demo.directive('myDirective', function($parse) {
    return {
        restrict: "E",
        scope: {         
            values: '=',
            searchtext: '=',
            onsearchtextchange: '&'
        },
        template: '{{values.length}} <input ng-model="searchtext">',
        link:
        function(scope, element, attrs){
            scope.$watch('searchtext', function (tmpStr){
                setTimeout(function() {
                    // if searchStr is still the same..
                    // go ahead and retrieve the data
                    if (tmpStr === scope.searchtext)
                    {
                        scope.onsearchtextchange()(scope.searchtext);
                        console.log(scope.values.length);
                    }
                }, 1000);
            });
        }
    }
});

function MyCtrl ($scope) {
    $scope.some = {};
    $scope.some.values = [{a:1}, {a:2}];
    $scope.searchtext = "";
    $scope.onsearchtextchange = function(searchtext) {
        if (searchtext && searchtext.length != 0) {
            $scope.some.values = [{a:1}];
            console.log('values.length is:' + $scope.some.values.length);
        }
        else {
            $scope.some.values = [{a:1}, {a:2}];
            console.log('values.length is:' + $scope.some.values.length);
        }
    }
};