I am trying to get some input fields which collect the info after clicking the submit button using directive method and pass these values as arguments to a function. This is my code which doesn't work
<!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 >Initialise new parameters to generate 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 would like to use the values of param object as input argument of another function. Any help would be appreciated.
So I've tried to fix your directive:
1) You should use a tag inside your app for the directive to work;
2) Use bindings for the inputs and outputs;
3) For the form to submit using ngSubmit - the button should be inside of the form tag and have a type='submit';
4) I think you should not use ngController inside your directive's template. If you need a controller for your directive you can use controller or link property.
Here is an example of the networkInputs directive definition and usage, hope this helps:
var app = angular.module("myApp", [])
.directive('networkInputs', function() {
return {
restrict: 'E',
scope: {
inputs: '<',
submit: '&'
},
template:
'<h3 >Initialise new parameters to generate a network </h3>'+
'<form ng-submit="submit({inputs: inputs})" class="form-inline">'+
'<div class="form-group">'+
'<label>Number of nodes:</label>'+
'<input type="number" class="form-control" ng-model="inputs.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="inputs.m" ng-required="true">'+
'</div>'+
'<div class="form-group">'+
'<label>Minority:</label>'+
'<input type="number" class="form-control" ng-model="inputs.minority" ng-required="true">'+
'</div>'+
'<div class="form-group">'+
'<label>h<sub>ab</sub>:</label>'+
'<input type="number" class="form-control" ng-model="inputs.hAB" ng-required="true">'+
'</div>'+
'<div class="form-group">'+
'<label>h<sub>ba</sub>:</label>'+
'<input type="number" class="form-control" ng-model="inputs.hBA" ng-required="true">'+
'</div>'+
'<button style="color:black; margin: 1rem 4rem;" type="submit">Generate</button>' +
'</form>'};
})
.controller("MainCtrl", ['$scope',function($scope) {
$scope.networkInputs = {};
$scope.submit = function(inputs) {
//do whatever you want with your data insede the controller
var dataObject = {
N: inputs.N,
m: inputs.m,
minority: inputs.minority,
hAB: inputs.hAB,
hBA: inputs.hBA
};
//lets simply log them but you can plot or smth other
console.log(dataObject);
//clear form
$scope.networkInputs = {};
}
}]);<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body ng-app="myApp">
<h1 class="title">Simulating a network</h1>
<div ng-controller="MainCtrl">
<network-inputs inputs="networkInputs" submit="submit(inputs)"></network-inputs>
</div>
</body>