I am working on a directive that contains a form with a simple input. I have multiple instances of this directive on the same page (index.html). Outside of these directives, there is a button that, when clicked, should gather data from all the inputs within the directives.
Initially, I attempted to implement a solution found in a question on Stack Overflow about calling methods defined in AngularJS directives. However, I faced difficulties when trying to apply it to multiple directives simultaneously. I also experimented with accessing child elements using $$childHead, but later discovered that this approach was not recommended and stopped functioning as expected.
What would be the most effective method to achieve this goal?
Below is a simplified version of my code:
index.html:
<div ng-repeat="item in data">
<h1> {{item.name}} </h1>
<my-dir info=item >/my-dir>
</div>
<input type="submit" value="Save" ng-click="save()" />
Directive:
app.directive('myDir', function() {
return {
restrict: 'E',
scope: {
info: '='
},
templateUrl: '<input type="text" ng-model="myfield" />',
link: function(scope, element, attrs) {
scope.getData = function(){
var field_data = scope.myfield;
return field_data // not sure if needed
}
}
};
});
Controller:
$scope.save= function(){
// Call the getData function of the directive or get
// the data needed somehow and do something with it
}