[英]How to dynamic add new input with AngularJS model use JavaScript?
I have AngularJS controller: 我有AngularJS控制器:
$scope.name = "Ann";
$scope.test = "Hello, {{name}}!";
var element = document.createElement("input");
element.setAttribute('ng-model', "name");
document.getElementById("preview").appendChild(element);
And HTML-code: 和HTML代码:
<div id="preview">
<p ng-bind-html="test"></p>
</div>
{{name}}
But at page I see Hello, {{name}}!
但是在页面上我看到Hello, {{name}}!
, empty input and Ann
name. ,空输入和Ann
名称。 How to setting input and div for show name? 如何设置显示名称的输入和div? That I change name in input and name changed in div? 我在输入中更改了名称,在div中更改了名称吗?
ng-html compile does not compile bindings but only parses the static html. ng-html compile不编译绑定,而仅解析静态html。 If you want to also have your syntax compiled in strings you need to implement custom directive for that: 如果您还希望将语法编译为字符串,则需要为此实现自定义指令:
app.directive('ngHtmlCompile', ["$compile", function ($compile) {
return {
restrict: 'A',
link: function (scope, element, attrs) {
scope.$watch(attrs.ngHtmlCompile, function (newValue, oldValue) {
element.html(newValue);
$compile(element.contents())(scope);
});
}
}
}]);
and then you can compile: 然后可以编译:
<div ng-html-compile="Hello, {{name}}!"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.