动态编译由JavaScript插入的Angular控制器？

15 浏览
0 Comments

动态编译由JavaScript插入的Angular控制器？

我正在开发一个动态创建HTML的应用程序。我们开始使用Angular来使用angular.element()来创建HTML，并在其中定义一个控制器。angular.element("");问题是，由于它是在页面渲染之后创建的（例如，当用户点击某个地方时），插入的HTML与Angular不起作用，就像是普通的HTML。我该如何解决这个问题？

0

1 答案

0 Comments

在AngularJS中，当我们需要动态地插入一个通过JavaScript生成的控制器时，可能会遇到以下问题：

问题出现的原因：

1. 在AngularJS中，如果我们直接将HTML字符串插入到DOM中，AngularJS不会自动将这部分HTML编译为AngularJS的指令和表达式。

2. 如果我们需要使用AngularJS的指令和表达式来控制这部分插入的HTML，我们需要对它进行编译。

解决方法：

1. 我们可以使用$compile服务来编译这段HTML代码，然后将编译后的结果插入到DOM中。首先，我们需要将HTML代码包装成一个Angular元素对象，可以使用angular.element()来实现。

2. 然后，我们使用$compile服务将这个元素对象编译成一个链接函数(link function)。

3. 最后，我们将链接函数传入$scope对象，然后将编译后的元素插入到DOM中。

具体代码如下：

var template = angular.element(YOU_HTML_IN_STRING);
var linkFn = $compile(template);
var element = linkFn($scope);
angular.element(CSS_SELECTOR).html('').append(element);

如果你没有直接访问$compile服务的权限，可以参考以下链接中的解决方法：

how can we use $compile outside a directive in Angularjs

0