的表单中没有添加AngularJS $compiled元素。
的表单中没有添加AngularJS $compiled元素。
提问于 2015-08-05 23:00:44
我希望将具有表单属性( $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
谢谢你的帮助！
回答 3
Stack Overflow用户
回答已采纳
发布于 2015-08-05 23:10:59
您可能知道，$compile返回一个链接函数。该链接函数返回已链接的元素。这个元素还没有放在DOM中，所以在它的链接阶段，它不知道它应该以什么形式存在。
解决这一问题的两种方法：
cloneAttachFn #1:使用函数
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);
}Stack Overflow用户
发布于 2015-08-05 23:14:48
您必须实际添加到表单中。
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);
}
}
}
}]);对您的code..check进行了更改
http://plnkr.co/edit/Y3WCBVq7DyluaJBY1EOp?p=preview
Stack Overflow用户
发布于 2017-01-26 12:21:05
这是将JS和角范围的元素绑定在一起的代码。
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>
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/31844216
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号