AngularJS:指令ng-repeat在链接函数中不起作用。

I'm trying to create a directive that will eventually be an "auto complete" and display data underneath the form element.

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

I'm having a problem getting the ng-repeat in the inserted html to display the array of information that it gets from an attr.

在插入的html中获取ng-repeat来显示它从attr获得的信息数组是有问题的。

In the directive i'm monitoring the attr waiting for data to be populated, and once it's populated, I set it to a variable in the directive and try to ng-repeat the data in the ul html. Nothing is being shown, even though the variable is populated in the directive.

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

Any ideas why? I've tried doing a lot of things, i'm sure it's a parent/child scope issue, just not sure what I need to change? I'm trying to keep the directive scope isolated so I can reuse this directive multiple times.

任何想法为什么?我尝试了很多事情，我确定这是一个父/子范围的问题，只是不确定我需要改变什么?我试图将指令范围隔离开来，这样我就可以多次重用这个指令。

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

砰砰作响: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");
                }

            });
        }
    }

1 个解决方案

#1

Ok, I found a combination of errors in this code that makes it not work. See below:

好吧，我在这段代码中发现了错误的组合，使它无法工作。见下文:

In your link, cdata is not on the scope, so cannot be accessed by the HTML
在您的链接中，cdata不在范围内，因此HTML无法访问它
data contains an array and not a string, so you cannot interpolate as data="{{stuff}}"
数据包含一个数组，而不是字符串，因此不能作为data="{{stuff} "插入数据
Instead, you need to $watch for attr.data
相反，您需要为attr.data设置$watch
Since you add information to the scope, it should be a new one using scope: true
由于您向范围添加了信息，它应该是一个使用范围的新信息:true

That may be it, See fixed plunkr: http://plnkr.co/edit/K9D9h8SYaqNw3uKui1xT?p=preview

可能是这样的，请参阅fixed plunkr: http://plnkr.co/edit/k9d9d9h8syaqnw3ukui1xt?

#1