Question

我只想知道如何使用angularJS 从javascript创建：

<input type="text" ng-model="TheText">{{TheText}}

例如使用这样的东西：

<!DOCTYPE html> <html> <head> </head> <body ng-app="myApp" ng-controller="myCtrl"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script> <div id="Holder"></div> <script> angular.module('myApp', []) .controller('myCtrl', function() { var newdiv = document.createElement('div'); newdiv.innerHTML = '<input type="text" ng-model="TheText">{{TheText}}'; document.getElementById("Holder").appendChild(newdiv); }); </script> </body> </html>

我认为你必须使用$ compile或类似的东西，但我似乎没有得到任何有用的东西。基本上问题是，当我以这种方式创建时，任何ng指令都不会起作用。

SOLUTION：

使用自定义指令，这个答案解决了我的问题：

<!DOCTYPE html> <html> <head> </head> <body ng-app="myApp"> <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.7/angular.min.js"></script> <div mydiv></div> <script> angular.module("myApp", []) .directive("mydiv", function() { return { template: '<input type="text" ng-model="TheText">{{TheText}}' }; }); </script> </body> </html>

Answer 1

为什么不尝试简单（但功能强大）的html（）方法：

iElement.html('<svg width="600" height="100" class="svg"></svg>');

或作为替代方案附加：

iElement.append('<svg width="600" height="100" class="svg"></svg>');

当然，更清洁的方式：

 var elt = angular.element('<input type="text" ng-model="TheText">{{TheText}}');
 iElement.append(elt);

从Javascript创建AngularJS Ng元素

1 个答案: