使用定向的方法建立一个具有一些输入值的表单。

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

我正在尝试获取一些输入字段，这些字段在单击submit按钮后使用指令方法来收集信息，并将这些值作为参数传递给函数。这是我的代码，不管用。

<!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.

我想使用param对象的值作为另一个函数的输入参数。如有任何帮助，我们将不胜感激。

1 个解决方案

#1

So I've tried to fix your directive:

所以我试着修正你的指令

1) You should use a tag inside your app for the directive to work;

1)你应该在你的应用程序中使用一个标签来指示工作;

2) Use bindings for the inputs and outputs;

2)对输入和输出使用绑定;

3) For the form to submit using ngSubmit - the button should be inside of the form tag and have a type='submit';

3)表单提交使用ngSubmit -按钮应该在表单标签的内部，并有一个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.

4)我认为你不应该在指令模板内使用ngController。如果你需要一个控制器来指示你的指令，你可以使用控制器或链接属性。

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>

#1