Using directive way to build up a form with some input values

Question

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.

How the `networkInputs` directive is used? Btw the code in `param` service looks rather strange. — Stanislav Kvitash, Jun 27 '17 at 14:03
@StanislavKvitash As I described below, I would like to feed in the values which are obtained in the fields after clicking `submit` button to a function as argument and then refresh a plot in the html page. — Dalek, Jun 27 '17 at 14:08

score 1 · Accepted Answer · answered Jun 27 '17 at 14:35

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>

if in the following of my code I want to use input values for a function, which object contains the inputs? — Dalek, Jun 27 '17 at 17:16

Using directive way to build up a form with some input values

1 Answers1