Angularjs 实现一个已编译的新指令模板

正如我们所知，编译只经过一次，不会重复。 例如，如果我有一个控制器呢

<div ng-controller="SomeContr"></div>

，然后我创建

<span>{{ text }}</span>

{{text}

在控制器中，并使用appendChild（）方法将该项放在那里，或者甚至使用不动产

<div ng-controller="SomeContr">
<span>{{ text }}</span>
</div>

{{text}}

---

问题，我怎样才能让它在表达式{{text}}

中工作呢？首先要理解的一件重要事情是：不要在控制器中操作DOM，把所有DOM操作人员都放到指令中，让控制器负责模型（范围）。为了在指令中动态添加一些DOM元素，您可以使用服务（请参阅用法部分），该服务将执行与将字符串作为模板的一部分相同的工作：

HTML

<div app-directive ng-init="text = 'Hello World'"></div>

JavaScript

angular.module('app',[]).
  directive('appDirective', function($compile) {
    return {
      link: function(scope, element) {
        var html = '<span>{{text}}</span>';
        element.append($compile(html)(scope));
      }
    }
  });

angular.module（'app'，[]）。
指令（'appDirective'，函数（$compile）{
返回{
链接：功能（范围、元素）{
var html='{{text}}'；
append（$compile（html）（scope））；
}
}
});

普朗克：