Question

我希望将模板属性为$compiled的元素字符串直接添加到它们编译成的表单中（通过DOM继承），但是从测试开始 - 它不会自动发生。如果发生这种情况会很好，然后我可以验证表单，包括具有表单属性的新编译元素。

JS

.directive('addDynamicFormElements', ['$compile', function($compile) {
  return {
    link: function (scope, elem, attrs) {
      var tmpl = "<input name='newFormItem' ng-model='formScope.item3' required>";
      scope.click = function () {
        var el = angular.element(document.querySelector('#addFieldHere'));
        var compiled = $compile(tmpl)(scope);
        el.append(compiled);
      }
    }
  }
}]);

HTML

<h1>My Form</h1>
 <div ng-form="myForm">
    <input name="first" ng-model="formScope.item1">
    <input name="second" ng-model="formScope.item2">
    <button add-dynamic-form-elements ng-click="click()">Click here to append a new field</button>
    <div id="addFieldHere"></div>
 </div>

这是一个PLNKR，通过将表单表达式绑定到模板，您可以清楚地看到表单不直接包含新编译的元素：http://plnkr.co/edit/Blogc4lSVyNd26ySwGlq?p=preview

感谢您的帮助！

Answer 1

如您所知，$compile返回链接功能。该链接函数返回已链接的元素。此元素尚未放入DOM中，因此在其链接阶段，它不知道它应该存在的形式。

解决这个问题的两种方法：

＃1：使用cloneAttachFn功能：

link: function(scope, element){

  var tmpl = "<input name='newFormItem' ng-model='formScope.item3' required>";

  $compile(tmpl)(scope, function cloneAttachFn(prelinkedClone){
    element.append(prelinkedClone);
  });
}

＃2：在编译/链接之前将元素附加到DOM ：

link: function(scope, element){

  var tmpl = "<input name='newFormItem' ng-model='formScope.item3' required>";
  var templateElement = angular.element(tmpl);

  element.append(templateElement);
  $compile(templateElement)(scope);
}

Answer 2

您必须实际添加表单

angular.module('app', [])
.controller('ctrl', function($scope) { 
  $scope.formScope = {};
})
.directive('addDynamicFormElements', ['$compile', function($compile) {
  return {
   require: ['?^^form', 'ngModel'],
    link: function (scope, elem, attrs,ctrls) {
      var form=ctrls[0];
      var inputCtrl=ctrls[1];
      var tmpl = "<input name='newFormItem'  required>";
      scope.click = function () {
        var el = angular.element(document.querySelector('#addFieldHere'));
        console.log(form);
        form["newFormItem"] = inputCtrl;
        var compiled = $compile(tmpl)(scope);
        el.append(compiled);
      }
    }
  }
}]);

对您的代码进行了更改..检查

Answer 3

这是用JS和angular绑定角度范围的元素的代码

function myCtrl($scope,$compile) {
$scope.test="Hello World";
$scope.heooli=false;
    $scope.AppendText = function() {
     $('#divID').append('<p>{{test}}</p>');
     var myEl = angular.element( document.querySelector( '#divID' ) );
     $compile(myEl)($scope);
    }
}

<!DOCTYPE html>
<html ng-app="" ng-controller="myCtrl">
<body>
<button ng-click="AppendText()">
  Append
</button>
<p ng-show="heooli">Test</p>
<input type="text" ng-model="test">
<div id="divID">
</div>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.15/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script>
</body>
</html>

AngularJS $编译的元素不会添加到它们所在的表单中。

3 个答案: