Question

我正在尝试创建一个最终将是“自动完成”的指令，并在表单元素下显示数据。

我在插入的html中获取ng-repeat时出现问题，以显示它从attr获取的信息数组。

在指令中我正在监视等待数据填充的attr，并且一旦填充，我将其设置为指令中的变量并尝试ng-repeat ul html中的数据。即使变量填充在指令中，也没有显示任何内容。

任何想法为什么？我已经尝试过做很多事情，我确定这是一个父/子范围问题，只是不确定我需要改变什么？我试图保持指令范围隔离，所以我可以多次重复使用该指令。

Plunker：http://plnkr.co/edit/XoXli0OyRP6xObsDImOe

    //Directive
    function autoComplete($parse, $compile, $timeout) {
        var directive = {
            restrict: 'EA',
        //  scope: true,
            require: '?ngModel',
            link: link
        };

        return directive;

        function link(scope, elem, attr, ngModel) {
            var cdata = [];

            var modelGet    = $parse(attr['ngModel']);
            var modelSet    = modelGet.assign;


            scope.$watch(function() {
                return elem.attr('data');
            }, function(newVal) {
                cdata = newVal;
                console.log(cdata);
            });

            $timeout(function(){

                //var ewidth        = elem.outerWidth(); //Doesn't work in Plunker for some reason
                var ewidth  = '100%';
                var html        = '<div><ul class="list-group" style="position: absolute; width: '+ewidth+'px;"><li class="list-group-item" ng-repeat="codes in cdata track by $index">{{codes.code}}</li></ul></div>';
                elem.after($compile(html)(scope));
                scope.$apply();
                console.log("DIV has been added");
            });



            scope.$watch(function() {
                return modelGet(scope);
            }, function() {
                var string = modelGet(scope);
                if (string != undefined && string.length >= 6) {
                    console.log("Will do something later");
                }

            });
        }
    }

Answer 1

好的，我在这段代码中发现了一些错误组合，但却没有工作。见下文：

在link中，cdata不在范围内，因此无法通过HTML访问
data包含数组而非字符串，因此您无法插入为data="{{stuff}}"
相反，$watch

attr.data

由于您向范围添加信息，因此应使用scope: true

可能是这样，请参见修正 plunkr ：http://plnkr.co/edit/K9D9h8SYaqNw3uKui1xT?p=preview

AngularJS：指令ng-repeat在链接函数

1 个答案: