Javascript 无法将动态添加的指令编译到页面中

我试图将一个动态添加的元素指令添加到页面中，但它不起作用，并且在添加的页面中被编译。这是普朗克密码。代码有什么问题

var-app=angular.module（'myApp'，[]）；
应用控制器（“fCtrl”，函数（$scope，$compile）{
$scope.xx=['x'，'c'，'y'，'z'，'a']；
$scope.add=函数（）{
var temp=document.getElementById（'test'）.innerHTML；
模板=模板+“”；
document.getElementById（'test'）.innerHTML=templ；
//$compile（document.getElementById（'test'）.innerHTML）（$scope）；
警报（document.getElementById（'test'）.innerHTML）；
}
});
app.directive（'datanType'，函数（$compile）{
返回{
限制：'E'，
替换：正确，
链接：功能（范围、元素、属性）{
var testTemplate1='Test{{x}}'；
var testTemplate2='Test2'；
var testTemplate3='Test3'；
var模板=“”；
scope.arr=eval（attrs.con）；
开关（属性内容）{
案例“test1”：
template=testTemplate1；
打破
案例“测试2”：
模板=testTemplate2；
打破
案例“测试3”：
模板=testTemplate3；
打破
}
html（模板）；
$compile（ele.contents（））（范围）；
}
};
});
JS-Bin
结果:

添加表单元素Eg-错误区域

加里，这简直让我受不了，所以我把早上的目标定为找出愚蠢的语法：

将控制器代码更改为：

var elementToAdd = angular.element('<datan-type content="test1" con="{{xx}}"></datan-type>');
$compile(elementToAdd)($scope);
document.getElementById('test').appendChild(elementToAdd[0]);

var elementToAdd=angular.element（“”）；
$compile（elementToAdd）（$scope）；
document.getElementById（'test'）.appendChild（elementToAdd[0]）；

---

为什么会有不同？这是因为双向绑定在这里不起作用吗？我很确定，在

angular.element

中包装html会导致编译对其进行不同的处理。我对内部的了解还不足以告诉你确切的情况。如果您在网上查找示例，您通常会看到html是这样包装的，因此我假设这是标准的。我是否能够在相同的代码中在控制器中使用

此
（controllerAs）语法，并使指令对ng repeat起作用？当然，假设您使用了所有正确的表示法。大多数人使用
var vm=this
然后在html中为其分配内容
vm.ID=1
，然后
ng model=“vm.ID”
。这允许你在任何地方使用点符号，这是最佳实践。好的，酷。让我试试。当我使用与ng相同的代码时，请重复代码中断
var elementToAdd = angular.element('<datan-type content="test1" con="{{xx}}"></datan-type>');
$compile(elementToAdd)($scope);
document.getElementById('test').appendChild(elementToAdd[0]);