AngularJS ng-repeat 父指令中的重复数据？

Question

我正在尝试从表单元素中获取数据，然后使用 jQuery .after() 插入一个以显示可能的选择。我的直接通过获取使用 AngularJS 加载的名为“数据”的属性从表单中获取可能的匹配项。现在的问题是，当我尝试使用新插入的 ng-repeat 时，它没有列出它。

'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
            }

        });
    }
}

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

Answer 1

您可以尝试在elem.after(... 之后添加$scope.apply()，以帮助消化$scope.watch() 中所做的更改。

参考：https://stackoverflow.com/a/15113029/2242217