数据绑定使用＆QUOT后不工作;使用appendChild（）＆QUOT;添加新元素 [英] data-binding doesn't work after using "appendChild()" to add new element
问题描述
当我这样写，棱角分明的作品：
＆LT; HTML NG-应用=mptmanager级=NG-范围＆GT;
＆LT;身体GT;
＆LT;输入NG模型=测试/＆GT;＆LT; BR /＆GT;
{{测试}}
＆LT; /身体GT;
＆LT; / HTML＆GT;
＆LT;脚本SRC =JS / angular.min.js＆GT;＆LT; / SCRIPT＆GT;
＆所述; SCRIPT SRC =角/ angularModules.js＆GT;＆下; /脚本＆GT;
但是当我运行JS code是这样的：
变种临时=使用document.createElement（'DIV'）;
temp.innerHTML ='＆LT;输入NG模型=test2的＆GT;＆LT; BR /＆GT; {{测试2}}';
document.body.appendChild（临时）;
角有新的元素没有任何影响，所以我只能看到{{测试2}}我的网页上...
我怎样才能使角工作时，我尝试添加或更改我的页面JS？
上的一些元素采用了棱角分明的时候你不应该做的DOM操作指令之外。只是要完成，我会告诉你如何使这项工作呢。刚刚注入 $编译服务和编译范围的新标记。
VAR应用= angular.module（'对myApp'，[]）;app.controller（'myCtrl'，函数（$范围，$编译）{
$ scope.foo =默认值; VAR ELEM =使用document.createElement（'DIV'）;
elem.innerHTML ='＆LT;输入NG模型=foo的＆GT; {{美孚}}';
document.body.appendChild（ELEM）;
$编译（ELEM）（$范围内）;
}）;
下面是使用指令正确的方法：
＆LT; DIV我-指令＆GT;＆LT; / DIV＆GT;
＆LT; DIV我-指令2＆GT;＆LT; / DIV＆GT;
JavaScript的：
app.directive（'myDirective'，函数（）{
返回{
模板：'＆LT;输入NG模型=foo的＆GT; {{美孚}}'
};
}）;app.directive（'myDirective2'，函数（）{
返回{
编译：函数（元素）{
element.html（'＆LT;输入NG模型=foo的＆GT; {{美孚}}'）;
}
};
}）;
在你的指令，如果你使用链接的功能，它可以访问范围，你将不得不手动 $编译我证明以上，但要小心，以避免无限循环的标记。你通常会做这样的： $编译（element.contents（））（范围）; 如果$编译元素本身，您可以创建一个无限循环。
when i write like this, angular works:
<html ng-app="mptmanager" class="ng-scope">
<body>
<input ng-model = "test" /><br />
{{test}}
</body>
</html>
<script src="js/angular.min.js"></script>
<script src="angular/angularModules.js"></script>
but when i run JS code like this:
var temp = document.createElement('div');
temp.innerHTML = '<input ng-model = "test2"><br />{{test2}}';
document.body.appendChild(temp);
angular has no effect to the new element, so i can only see "{{test2}}" on my page...
how can i make angular work when i try to add or change some element on my page with JS?
You should never do DOM manipulation outside of directives when using Angular. Just to be complete, I'll show you how to make that work anyway. Just inject the $compile service and compile the new markup with the scope.
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope, $compile) {
$scope.foo = 'Default value';
var elem = document.createElement('div');
elem.innerHTML = '<input ng-model="foo">{{foo}}';
document.body.appendChild(elem);
$compile(elem)($scope);
});
Here are proper approaches using directives:
<div my-directive></div>
<div my-directive2></div>
JavaScript:
app.directive('myDirective', function() {
return {
template: '<input ng-model="foo">{{foo}}'
};
});
app.directive('myDirective2', function() {
return {
compile: function(element) {
element.html('<input ng-model="foo">{{foo}}');
}
};
});
In your directive, if you use the link function, which has access to scope, you will have to manually $compile the markup as I demonstrated above, but be careful to avoid an infinite loop. You will usually do this: $compile(element.contents())(scope); If you $compile the element itself, you would create an infinite loop.
这篇关于数据绑定使用＆QUOT后不工作;使用appendChild（）＆QUOT;添加新元素的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
