AngularJS $编译的元素不会被添加到它们所在的窗体中

AngularJS $compiled elements aren't added to form which they reside inside of.

本文关键字：窗体 编译 元素 AngularJS 添加      更新时间：2023-09-26

我想元素字符串的形式属性是$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

谢谢你的帮助!

您可能知道，$compile返回一个链接函数。该链接函数返回已经链接的元素。这个元素还没有放到DOM中，所以在它的链接阶段，它不知道它应该处于什么形式。

有两种解决方法:

#1: use cloneAttachFn function:

link: function(scope, element){
  var tmpl = "<input name='newFormItem' ng-model='formScope.item3' required>";
  $compile(tmpl)(scope, function cloneAttachFn(prelinkedClone){
    element.append(prelinkedClone);
  });
}

#2:在编译/link之前将元素追加到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);
}

必须添加到表单

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);
      }
    }
  }
}]);

修改了你的代码..check out

http://plnkr.co/edit/Y3WCBVq7DyluaJBY1EOp?p =预览

这是在JS和angular中绑定具有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>

相关文章：