Question

我正在尝试在AngularJS（1.7.2）中实现一个指令，该指令基于包含表单架构的JSON构建表单元素（输入，单选按钮等）。（类似于this）

在下面的jsBin example上，我可以创建输入元素，但是当我输入新值并且foo（）函数不会在更改时触发时，模型不会更新。关于为什么这种方法无效的任何想法，以及如何将模型与新创建的元素绑定的另一种方法？

.js

demo.controller("demoCtrl",["$scope",function($scope){
 $scope.values = [200, 548];

 /*The function called on-change*/
 $scope.foo = function(){
  console.log("In foo function!!");
 }

 /*Object that incudes elements property*/
 $scope.elem={
   "id": "input_2",
   "parentId": "row_1",
   "title": "Dynamic input element",
   "name": "input_2",
   "required": true,
   "validationExpression": "/^[0-9]+(\.[0-9]{1,2})?$/",
   "elementType": "INPUT_TEXT",
   "model": "values[1]"  
   }
 }]);

demo.directive("buildForm",['$compile',function($compile){return{
restrict:'A',
scope:{
  elem:'=elem',
  values:'=values',
  foo: '&foo'
},
link:function(scope,element,attrs){

  /* Create the outer form-group container */
  let div = angular.element('<div class="form-group"></div>');

  /* Add an label element in form-group container*/
  div.append("<label>"+ scope.elem.title + "</label>");

  /*Add the template for the input container*/
  let inputDiv = angular.element('<div class="input-group mb-3">' + 
                                   '<div class="input-group-append">' +
                                      '<span class="input-group-text" id="basic-addon2">$</span>' +
                                   '</div>' +
                                 '</div>');
  /* Create the input and add the attributes  */
  let input = angular.element('<input type="number" class="form-control" min="0" step="0.01" />');
  input.attr('name',scope.elem.name);
  input.attr('ng-class', '{"is-invalid":form.input_1.$invalid}');
  input.attr('ng-model', scope.elem.model);
  input.attr('ng-required', scope.elem.required);
  input.attr('ng-pattern','/^[0-9]+(\.[0-9]{1,2})?$/');
  input.attr('ng-change','foo()')

  inputDiv.prepend(input[0]);
  div.append(inputDiv[0]);
  element.append(div[0]);

  $compile(element.contents())(scope);
  element.replaceWith(element);
}}}]

.html

<body ng-controller="demoCtrl">
 <div class="container">
  <h3>Dynamic JSON form Example</h3>
   <form name="form" novalidate>
    <div class="form-row" id="row_1" build-form elem="elem" values="values" foo="foo()">
    <!-- The Dynamic JSON Input will be added here -->  
    </div> 
    <div class="form-row">
      <!-- The Static input -->
      <div class="form-group">
        <label>Static input element</label>
         <div class="input-group mb-3">
          <input type="number" ng-change="foo()" class="form-control" ng-class="{'is-invalid':form.input_1.$invalid}" name="input_1" ng-model="values[0]" ng-pattern="/^[0-9]+(\.[0-9]{1,2})?$/" min="0" step="0.01" placeholder="0.00" required >
          <div class="input-group-append">
           <span class="input-group-text">$</span>
          </div>
          <p class="invalid-feedback" ng-if="form.input_1.$error.pattern && form.input_1.$dirty">Type a two decimal digit number.</span>
          <p class="invalid-feedback" ng-if="form.input_1.$error.number && form.input_1.$dirty">Please enter a number.</span>
          <p class="invalid-feedback" ng-if="form.input_1.$error.required && form.input_1.$dirty">Field is required.</span>
        </div>
       </div>
      </div>
    </form>
    The model values are:  {{values}}
   </body>

P.S：在示例中，我还包含了一个静态输入来演示预期的行为。

谢谢：）

JSON动态表单上的数据绑定-AngularJS

0 个答案: