in the SAVE Button I want to use the param to enable or disable button, using the function from the component, ex. If the input field has 7 characters then return true and enable the save button. But now I'm stuck and I cannot use the param outside of the test-component template.
The structure can be like this:
1. a function inside the testComponent.js which check the length of input string
2. if length is bigger than 6 then pass the true to the param variable
3. then enable the save button which is outside of the testComponent.js
Here is also the PLUNKER
Already in the snippet the button is hard coded.
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>