How to use an output binding component outside a template in AngularJS

Question

How to use an output binding component outside a template in AngularJS

in SAVE ButtonI want to use the button paramto turn on or off by using the function of the component, for example. If the input field contains 7 characters, return trueand enable the save button. But now I am stuck and I can’t use paramout test-component template.

The structure can be as follows: 1. a function inside testComponent.jsthat checks the length of the input string 2. if the length is greater than 6, then pass it trueto a variable param 3. then turn it on SAVE Button, which is outsidetestComponent.js

PLUNKER is also located here.

Already in the fragment, the button is hardcoded.

    angular
        .module('client', [])
        .component('testComponent', {
            template: '<h1>{{$ctrl.param}}</h1>',
            controller: function() {
                // this.param = '123';
            },
            controllerAs: 'vm',
            bindings: {
                param: '@'
            }
        })

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">

    <title>AngularJS Example</title>

    <!-- AngularJS -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.js"></script>


</head>
<body>

<div ng-app="client">
    Test
    <test-component param=true>  </test-component>

    <button ng-disabled="true">Save</button>
</div>

</body>
</html>