Javascript AngularJS ng从父级重复指令中的数据？

我试图从表单元素获取数据，然后使用jQuery.after（）插入一个表单元素以显示可能的选项。My direct通过使用AngularJS加载名为“data”的属性，从表单中获取可能的匹配项。现在的问题是，当我尝试使用新插入的元素重复时，它不会列出它

'use strict';

angular
    .module('autoComplete', [])
    .directive('autoComplete', autoComplete);

function autoComplete($parse)  {
    var directive = {
        restrict: 'EA',
        require: '?ngModel',
        link: link,
    };

    return directive;

    function link(scope, elem, attr, ngModel) {
        var modelGet = $parse(attr['ngModel']);
        var modelSet = modelGet.assign;
        scope.$watch(function() {
            return modelGet(scope);
        }, function() {
            var string = modelGet(scope);
            if (string != undefined && string.length > 6) {
                var vm = this;
                vm.data = attr.data;
                vm.width = elem.outerWidth();
                elem.after('<div><ul class="list-group" style="position: absolute; width: '+vm.width+'px;"><li class="list-group-item" ng-repeat="codes in vm.data track by $index">{{code}}</li></ul></div>');

                console.log(vm.data); //This outputs the data just fine
            }

        });
    }
}

“严格使用”；
有棱角的
.module（'autoComplete'，[]）
.指令（“自动完成”，自动完成）；
函数自动完成（$parse）{
var指令={
限制：“EA”，
要求：“？ngModel”，
链接：链接，
};
返回指令；
功能链接（范围、要素、属性、ngModel）{
var modelGet=$parse（attr['ngModel']）；
var modelSet=modelGet.assign；
范围$watch（函数（）{
返回modelGet（范围）；
}，函数（）{
var string=modelGet（范围）；
if（string！=未定义&&string.length>6）{
var vm=这个；
vm.data=attr.data；
vm.width=elem.outerWidth（）；
元素之后（'
{code}
）；
console.log（vm.data）；//这会很好地输出数据
}
});
}
}

---

一旦放入，屏幕上生成的唯一内容就是{{code}。我假设我应该尝试以某种方式以角度编译它？

您可以尝试在

元素（…

之后添加

$scope.apply（）

，以帮助消化

$scope.watch（）

中所做的更改

---

参考资料：

是的，要想让它发挥作用，你需要编译，但为什么你要在Jquery中这样做，而不是以一种更具角度性的方式？你知道最好的方法是什么吗？我想说，最小化Jquery，你能创建一个你目前拥有的东西吗？这样做会更容易。这是一个问题还是一个答案？如果你需要的话要澄清某事，请使用注释。不需要澄清，这是修辞。答案已更新。