My goal is to create input fields that capture information when the submit button is clicked using the directive method. These values will then be passed as arguments to a function. However, my current code is not functioning as expected.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<title>Random Network</title>
</head>
<body>
<h1 class="title">Simulating a network</h1>
<div ng-app="myApp">
</div>
<script type="text/javascript">
var app = angular.module("myApp", []);
app.directive('networkInputs', function() {
return {
restrict: 'E',
scope: {},
template:
'<h3 >Initialize new parameters for generating a network </h3>'+
'<form ng-submit="submit()" class="form-inline" ng-controller="MainCtrl">'+
'<div class="form-group">'+
'<label>Number of nodes:</label>'+
'<input type="number" class="form-control" ng-model="networkInputs.N" ng-required="true">'+
'</div>'+
'<div class="form-group">'+
'<label>Number of edges of a new node:</label>'+
'<input type="number" class="form-control" ng-model="networkInputs.m" ng-required="true">'+
'</div>'+
'<div class="form-group">'+
'<label>Minority:</label>'+
'<input type="number" class="form-control" ng-model="networkInputs.minority" ng-required="true">'+
'</div>'+
'<div class="form-group">'+
'<label>h<sub>ab</sub>:</label>'+
'<input type="number" class="form-control" ng-model="networkInputs.hAB" ng-required="true">'+
'</div>'+
'<div class="form-group">'+
'<label>h<sub>ba</sub>:</label>'+
'<input type="number" class="form-control" ng-model="networkInputs.hBA" ng-required="true">'+
'</div>'+
'</form>'+
'<button style="color:black; margin: 1rem 4rem;" ng-click="submit()">Generate</button>';
});
app.service('param', function() {
var param = this;
param = [];
});
app.controller("MainCtrl", ['$scope','param',function($scope, param) {
$scope.networkInputs = {};
$scope.submit = function() {
var dataObject = {
N: $scope.networkInputs.N,
m: $scope.networkInputs.m,
minority: $scope.networkInputs.minority,
hAB: $scope.networkInputs.hAB,
hBA: $scope.networkInputs.hBA
};
console.log($scope);
param.push(dataObject);
$scope.networkInputs = {};
}
}]);
</script>
</body>
</html>
I am looking to utilize the values stored in the param object as input arguments for another function. Any guidance on how to achieve this would be greatly appreciated.