使用指令方式构建具有一些输入值的表单

Question

我正在尝试获取一些输入字段，这些字段在使用 directive method 单击 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>

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

Answer 1

所以我已经尝试修复你的 directive:

1) 您应该 use a tag inside your app 才能使指令生效；

2) 输入和输出使用bindings；

3) 对于使用 ngSubmit 提交的表单 - 按钮应该在 form 标签内并且有一个 type='submit';

4) 我认为你不应该使用 ngController inside your directive's template. If you need a controller for your directive you can use controller or link property.

下面是 networkInputs 指令定义和用法的示例，希望对您有所帮助：

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>

使用指令方式构建具有一些输入值的表单

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

javascript

angularjs

angularjs-directive

angularjs-scope

angularjs-controller